QR Component using basic CSS

Hey Mark, nice job.

.container p {...} means p tag inside the container, doesn't matter how nested the p is. For example .container p {...} will style this:

<div class="container"><div><div>
<p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
</div></div></div>

but .container > p {...} will not. .container > p {...} only works for this:

<div class="container">
<p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
</div>

p has to direct children of the .container

I prefer to use neither of them. But i will choose .container > p {...} if i have to because .container p {...} might cause some styling issues on bigger projects if not used carefully.

You can also make it longer like .container > div > div > p {...}

Also i would move the flex to the body (for footer and header)

body {
    background-color: #D5E1EF;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

For centering you can also use grid, it is just 1 less line of code. Flex or grid, whatever you prefer