I have a container with max-width: 80 rem and margin-inline: auto and when I apply it to a grid it works perfectly by centering the grid from 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>
But I want to put the container class in the item header cell, but it doesn't work properly, it centers all the header content without reaching the size of 80rem, I don't understand why? I know about ils because of margin-inline but usually it's centered at 80rem and not before.
.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;
} 
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
When the "container" class is applied to the parent "grid-container"
div, it hasmax-width: 80rem;andmargin-inline:auto;. Therefore, when the viewport width is greater than 80rem, the available inline margins will be split and applied evenly betweendivand its parent (body), wheredivis centered > div.headeris a child ofdiv, so it has default left alignment within its container.header, the width of thedivis not restricted and theheaderis now divided and applies all available inline margins at Between itself anddiv, causingheaderto be centered. The available margins come from theactualwidth of the header (almost 40rem), not from the max-width declaration.If you only want
headerto have maximum width instead ofmain, you can achieve your desired result by addingwidth: 100%to.container.flex { display: flex; gap: var(--gap, 2rem); } .grid-container { height: 100vh; display: grid; grid-template-rows: min-content 1fr; text-align: center; } .container { width: 100%; max-width: 80rem; margin-inline: auto; }<div class="grid-container"> <header class="primary-header flex container"> <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>