国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

Ich habe einen Container mit max-width: 80 rem und margin-inline: auto und wenn ich ihn auf ein Raster anwende, funktioniert es perfekt, indem das Raster ab 80 rem zentriert wird

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

Aber ich m?chte die Containerklasse in die Element-Header-Zelle einfügen, aber es funktioniert nicht. Es zentriert den gesamten Header-Inhalt, ohne die Gr??e von 80rem zu erreichen. Ich verstehe nicht, warum? Ich kenne ils aufgrund von margin-inline, aber normalerweise ist es bei 80rem zentriert und nicht davor.

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