QR code component using Flexbox

HTML:

• You need a <main>, this is important for accessibility. This can also be the card, as we want the structure to be as simple as possible here.

• You don't need any of the divs, so I would remove those.

• The image must have alt text! This is essential for screen readers to understand the image. The alt text should be descriptive, and in this example, it also needs to say where it leads (frontendmentor.io).

• It's common practice to use classes instead of IDs.

CSS:

• It's good practice to include a CSS Reset at the top.

• Do not use font-size: 62.5%.

• text-align: center should be on the body. Remove it from the <h1> - the heading will inherit the value from the body, so your code is redundant.

• On the body, remove overflow: hidden and width: 100% - it is a block element, hence it is 100% wide by default.

• The card's parent should have a min-height instead of a height.

• Remove the fixed width and height. This includes all of the % widths, too. You rarely want to set fixed dimensions, as this easily creates issues with responsiveness.

• Add a max-width of around 20rem on the card, to prevent it from getting too wide on larger screens.

• Remove the footer styles, unless you actually include the <footer> in your HTML.

• Remove the margin on the card, it is already centered using Flexbox.

• Add display: block and max-width: 100% on the image - the max-width prevents it from overflowing its container.