Simple css flex solution

Hello there 👋. Congratulations on successfully completing the challenge!

I have recommendations regarding your code that I believe it will great interest to you.

HTML: This solution generates accessibility error reports. So fix it by replacing the <div class="main"> element with the semantic element <main> in your index.html file to improve accessibility and organization of your page.

You should add one h1 tag inside your main tag and add alt="QR code image" attribute inside <img src="images/image-qr-code.png">

In place of <div class="attribution"> you should use footer tag.

I hope you find this helpful.

Happy coding!

You forgot to set the height of the body element. Set it to 100vh. It's required if you want to use align-items: center; to center the box on the screen.

You can add this to your body:

This gonna make that the body takes the 100 percent of the viewport and the align-items gonna take the desire effect

{ min-height: 100vh; margin: 0px; }

To your body tag add: min-hight: 100vh

and You are set :D

FIrst <h> element on page should always be <h1>

Also You should edit or remove attributions section.

Anyway good job 👍and keep it up! 🏋️‍♂️