@KapteynUniverse
Posted
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
Marked as helpful