QR Code Component: centered vertically and horizontally using position

Hey man good job on the challenge. This project doesn't need any grid so it's fine the way you've done it ( although I can argue that it doesn't need any flexbox either 😅 ).

The other thing is I don't see any need for media queries in this challenge. instead of using static width for the main__container , you can use something like :

.main__container {
  width: 100%;
  max-width: 270px;
}

With the above's approach, You won't need any media queries, main__container will occupy 100% of the screen and when it reaches 270px width, It will stop growing. You can give some paddings to the parent element to prevent main__container from hitting the screen's edges on mobile devices.

Overall you did great, Keep it up.

Hey! Congratulations on completing this challenge... You have accessibility issues that need to fix.

• Document should have one main landmark, Contain the component with <main>.

<main>
   <div class="main__container">
      //...
   </div>
</main>

• All page content should be contained by landmarks, Contain the attribution with <footer>.

<footer>
   <div class="attribution">
      //...
   </div>
</footer>

• I suggest you use REM for font size, It is a must for accessibility because px in some browsers doesn't resize when the browser settings are changed.

See this article ---> CSS REM – What is REM in CSS?

I hope this is helpful to you... Amazing work. Keep it up! 👍