QR Code Component

Hi @Daniel3-14 👋, good job completing this challenge, and welcome to the Frontend Mentor Community! 🎉

I have some suggestions you might consider to improve your code:

• Use the <main> tag to wrap all the main content in your solution instead of using <div class="container">.

• Use <footer> instead of <div class="attribution">. The <footer> element contains authorship information.

• The container isn't centered correctly. You can use flexbox to center elements. You can use flexbox to center elements:

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

Additionally, remove the margin to center the image correctly:

.container {
    text-align: center;
    /* margin: 10% auto; */
    margin: 1rem;
    /* width: 90vw; */
    . . . 
}

Links with 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).

I hope those tips will help you! 👍

Good job, and happy coding! 😁