QR Code Component

👾Hello Jen, congratulations for your solution!

I've checked your code and you need to remove some margins and padding-top to give it the proper alignment, add some flex properties in the body, see the code below:

body {
    font-family: 'Outfit', sans-serif;
    background-color: hsl(212, 45%, 89%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.qr_component {
    background-color: hsl(0, 0%, 100%);
    width: 375px;
    /* height: auto; */
    /* margin: 0 auto; */
    /* margin-top: 100px; */
    border-radius: 20px;
    padding: 15px;
}

If you want to reduce you code and have more control over it, you can use a single div to wrap everything and delete all the classes, note that for this challenge there are only one element for each kind, img, h1 and p. So you can select all of them with its selector without need for classes img, p, h1, div.

Hope it helps and happy codign!

Hey Jen, congratulations on finishing your first challenge! I'm new here too, and I ran into the exact same problem you did:

**All page content should be contained by landmarks

Context:** `<div class="attribution"> Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by <a href="#">J. Murphy</a>.

</div>`

The way I solved it was by making this a footer section instead of a div. That might be the answer to the other similar warning on your report too.

The CSS looks good to me although I'm not a super trained eye yet. Restructuring the HTML might lend to changing the CSS a little.

Also min-height: 100vh; has been my friend recently. Anyway, you're doing great. Keep going and happy coding!