Use max-width containers in grid items

Question

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;
}

Answer 1

When the "container" class is applied to the parent "grid-container" div, it has max-width: 80rem; and margin-inline:auto;. Therefore, when the viewport width is greater than 80rem, the available inline margins will be split and applied evenly between div and its parent (body), where div is centered > div. header is a child of div, so it has default left alignment within its container.

When the "container" class is applied to the header, the width of the div is not restricted and the header is now divided and applies all available inline margins at Between itself and div, causing header to be centered. The available margins come from the actual width of the header (almost 40rem), not from the max-width declaration.

If you only want header to have maximum width instead of main, you can achieve your desired result by adding width: 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>