QR code component using css

Some recommendations regarding your code could be of interest to you.

HTML

In order to fix the accessibility issue:

• You need to replace <div class="container"> with the <main class="container"> tag. You'd better use Semantic HTML, and you can also reach more information about it from Using Semantic HTML Tags Correctly.

After committing the changes on GitHub and you need to deploy it as a live site. Finally, you should click generate a new report on this solution page to clear the warnings.

CSS

• In order to center the card correctly, you'd better add min-height: 100vh to the body and you don't need to use margin-top for it:

body {
  /* margin-top: 10%; */
  min-height: 100vh;
}

• Also, you don't need flexbox in the .container for this solution

.container {
  /* display: flex; */
  /* flex-direction: column; */
  /* justify-content: center; */
  /* align-items: center; */
}

Hope I am helpful. :)

You can surely use px for the div container and the Qr image. And I would suggest you reduce the heights of the elements so they would match the original preview.