QR code component solution

Hi @K-Muzslay 👋, good job for completing this challenge and welcome to the Frontend Mentor Community! 🎉

Answering your question here are some suggestions to improve your code:

There are two modern CSS techniques to center elements

Using flexbox layout:

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

Using grid layout

body {
   width: 100%;
   min-height: 100vh;
   display: grid;
   place-content: center;
}

More information:

• The Complete Guide to Centering in CSS
• A Complete Guide to Flexbox (CSS-Tricks)
• How TO - Center Elements Vertically (W3Schools) |
• CSS Layout - Horizontal & Vertical Align (W3Schools)

And remove:

main {
    /* margin: 0; */
    /* position: absolute; */
    /* top: 50%; */
    /* left: 50%; */
    /* -ms-transform: translate(-50%, -50%); */
    /* transform: translate(-50%, -50%); */
}

Another tips:

• Use max-width: 360px to .container selector instead of width.
• Use margin: 0.625rem or margin: 10px in the container selector so that it has some space when viewed on mobile devices.

I hope those tips will help you.

Good Job and happy coding !