I am struggling with the alignment of elements in my code. Here is what I currently have:
HTML:
</div class="container">
<footer>Maximilian Crosby ©</footer>
</div>
<div class="bot-bar" >
<a href="./contact-us.html">Contact us</a>
<a href="./contact-us.html">Privacy</a>
<a href="./contact-us.html">Legal</a>
</div>
CSS:
.container {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 200px 10fr 1fr;
grid-template-areas:
"header"
"advert"
"main"
"footer";
text-align: center;
}
footer {
grid-area: footer;
margin: 1em 0 0 0;
}
.bot-bar {
display: flex;
flex-flow: wrap;
flex: 0 1 auto;
justify-content: space-evenly;
align-items: center;
padding: 1em 0 1em 0;
}
The issue I'm facing is that the word "Privacy" in the flex bar is not perfectly centered below the footer text. This is due to how flex works, centralizing all items within a flex container.
I would like to know how can I center the word "Privacy" using flex? Do I need to specifically target "Privacy" and apply justify-content: center; along with padding adjustments?