Responsive QR-Code using HTML and CSS

There are some important changes needed here

Html

1. Container should be a main element. This is called a landmark and worth reading about to make sure you understand their use
2. The image is the most important content in this component. It is nit decorative. That means it needs a proper alt description like "QR Code to FrontendMentor.io"
3. You should never have text in divs or spans alone. They are meaningless elements used for layout. For text you should always be using meaningful elements like heading and paragraph in this challenge

CSS

1. Look up how to center a component o n the screen. In this case, your body element should have min-height 100vh along with flex or grid properties to center the component on the screen. The component should not have huge margins to try and center it
2. You don't need max height on the image. Standard practice is to make images display block and max-width 100%.
3. The container should not have an explicit width. Instead, use max width, so it can shrink if it needs to (like it does on my small phone screen)
4. Give the card a small bit of margin so it can't hit the screen edges. Alternatively, you could give the body a little padding
5. Font size should never ever be in px! Use rem. Very important
6. This challenge does not need a media query

Your solution looks good, for best practice , use heading tags <h1>....to<h6> for any heading. try increasing the font-weight of the main heading by using a h2 or h3 instead of adding the text directly into a div. For flexbox, i found this game very helpful and i really recommend , https://flexboxfroggy.com/

Hey, great job on the solution.

If you want to learn flexbox, practice, read some articles and practice more. Flexbox can be simple, but it also has a lot of power to do complex things.

The "manual" for all web development is the MDN Web Docs, they have guides, visual examples and tips. Here is their guide to flexbox, worth a read: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox

CSSTricks also has a "visual guide" to flexbox, which is really helpful to visualize how some flex properties works: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

So here is a small challenge, try centering vertically and horizontally your .container div using flexbox.