flexbox

You managed to center the card perfectly and it stays centered on all sizes, so good job.

Instead of using margin: 0 auto; you can use the flexbox property align-items: center;.

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

.secao {
    width: 250px;
    background-color: hsl(0, 0%, 100%);
    border-radius: 10px;
    padding: 15px 15px 30px;
}

In this case the main's flex-direction: column; can be left out because the default flex-direction: row; already allows us to center it with justify-content: center; and align-items: center;.

This would give us:

main {
    height: 100vh;;
    display: flex;
    justify-content: center;
    align-items: center;
}

You can also decide to use grid:

main {
    height: 100vh;;
    display: grid;
    place-items: center;
}

.secao {
    width: 250px;
    background-color: hsl(0, 0%, 100%);
    border-radius: 10px;
    padding: 15px 15px 30px;
}

Also, I think moving box-sizing and font-family would be an improvement, since we want them to apply to all our elements:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Outfit', sans-serif;
}

I recommend checking out https://mastery.games/flexboxzombies/ and https://cssgridgarden.com/ to learn more about flexbox and grid!

Hello there 👋. Congratulations on successfully completing the challenge! 🎉

• I have other recommendations regarding your code that I believe will be of great interest to you.

.

iMAGES 📸:

• Since this component involves scanning the QR code, the image is not a decoration, so it must have an alt attribute.

• The alt attribute should explain its purpose.

• E.g. alt="QR code to frontendmentor.io"

.

HEADINGS ⚠️:

• This solution had generated accessibility error report due to lack of level-one heading <h1>

• Every site must want at least one h1 element identifying and describing the main content of the page.

• An h1 heading provides an important navigation point for users of assistive technologies, allowing them to easily find the main content of the page.

• So we want to add a level-one heading to improve accessibility by reading aloud the heading by screen readers, you can achieve this by adding a sr-only class to hide it from visual users (it will be useful for visually impaired users)

.

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!