Currently, I am working on creating some pages for the Free Code Camp CSS challenges.
However, I am facing an issue with my tags not centering properly when I collapse the grid upon @media activation. They tend to drift slightly to the right side.
If you would like to view the complete pen, click on this link:
https://codepen.io/alioshr/pen/KKPBPMr
I have attempted various solutions such as using inline-block display and justify-self to center, but the issue persists.
<html>
<header id="header">
<figure>
<img id="header-img"src="https://cdn.shopify.com/s/files/1/0866/9666/files/checkout_logo_4_1024x2_37df55d3-8344-46fb-8913-ea64de22f564_500x.png?v=1509363172">
</figure>
<div>
<h1>Doce Meliponicultura</h1>
<p>Reconnect with Mother-nature</p>
</div>
<nav id="nav-bar">
<ul>
<li><a href="#top-features" class="nav-link">Top Features</a></li>
<li><a href="#products" class="nav-link">Products</a></li>
<li><a href="#social" class="nav-link">Social</a></li>
</ul>
</nav>
</header>
</html>
<style>
a {text-decoration: none; display: inline-block;}
#header {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
background: gold;
align-items: center;
justify-self: center;
position: fixed;
top: 0;
left:0;
width: 100%;
z-index: 99;
}
@media (max-width: 600px) {
#header {grid-template-areas: "title" "logo" "nav-bar";}
#header > figure {grid-area: logo;}
#header > div {grid-area: title;}
#header > nav {grid-area: nav-bar;}
}
#header > figure {
justify-self: start;
align-self: center;
display: relative;
max-height: 140px;
}
@media (max-width: 600px) {
#header > figure {
justify-self: center;
}
}
#header > nav {
justify-self: end;
}
@media (max-width: 600px) {
#header > nav {
justify-self: center;
}
}
</style>