CSS, Html

Hi @Xtrum! Very good job on this first challenge

Here are some tips

1- Use semantic tag <main> instead of <div> to wrap your code

2- Avoid using css position property and use Flexbox or CSS Grid for layouts. Feel free to read some documentations about this two css modern property.

3- Try to use any modern css reset to remove default css margin and padding on elements and others properties set by default.

Hope this advices will help you.

Happy coding

Hi, you did really great for a beginner. You can center the container by using the css flexbox property. Here's how:

body {
   width: 100%;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}
Good job!

It's just two weeks and you are already killing it!

To make the QR image scale with the container, you can simply give it max-width:100%

I recommend you to read more about CSS Flexbox and CSS Grid, they will help you a lot through your journey. You could center your container vertically and horizontally using one of them.

I am just a newbie, but here's my solution if you want to take a look:

https://www.frontendmentor.io/solutions/qr-component-using-css-flex-FxuBLT9kE9

Keep up the great work!👏