Having a container with a max-width of 80 rem and margin-inline set to auto, when applied to the grid, it perfectly centers the grid within 80 rem.
<div class="grid-container container">
<header class="primary-header flex "> //i want to put container class here
<h1 class="logo uppercase text-white">adventure</h1>
<button class="mobile-nav-toggle" aria-controls="primary-navigation" aria-
expanded="false"><span class="sr-only">Menu</span></button>
<nav class="flex">
<ul id="primary-navigation" class="primary-navigation flex text-white capitalise
letter-spacing-3 fs-base" data-visible="false">
<li><a href="">home</a></li>
<li><a href="">tours</a></li>
<li><a href="">explore</a></li>
<li><a href="">about</a></li>
<li><button class="btn bg-pink text-white ">contact</button></li>
</ul>
</nav>
</header>
<main></main>
</div>
Attempting to place the container class in the header cell item doesn't yield the expected results. Instead of centering at 80rem as desired, all header content is centered without reaching that size. The issue seems related to margin-inline but still perplexing.
.flex {
display: flex;
gap: var(--gap, 2rem);
}
.grid-container {
height: 100vh;
display: grid;
grid-template-rows: min-content 1fr;
text-align: center;
}
.container {
max-width: 80rem;
margin-inline: auto;
}