그리드 항목에 최대 너비 컨테이너 사용

Question

max-width: 80 rem 및 margin-inline: auto를 가진 컨테이너가 있는데 이를 그리드에 적용하면 80 rem에서 그리드를 중앙에 배치하여 완벽하게 작동합니다

으아악

하지만 항목 헤더 셀에 컨테이너 클래스를 넣고 싶지만 작동하지 않습니다. 80rem 크기에 도달하지 않고 모든 헤더 내용을 중앙에 배치합니다. 이유를 모르겠습니다. 나는 마진 인라인 때문에 ils에 대해 알고 있지만 일반적으로 이전이 아닌 80rem에 중심을 둡니다.

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

Answer 1

"컨테이너" 클래스가 상위 "그리드 컨테이너"div时，它具有max-width: 80rem;和margin-inline:自动；。因此，当视口宽度大于 80rem 时，可用的内联边距将被分割并平均应用于 div 及其父项 (body) 之间，其中 div 居中>div。 header 是 div의 하위 클래스에 적용되면 해당 컨테이너 내에서 기본 왼쪽 정렬이 적용됩니다.

"컨테이너" 클래스가 max-width 선언이 아닌 header 时，div 的宽度不受限制，并且 header 现在已划分并应用所有可用的内联边距位于其自身和 div 之间，导致 header 居中。可用边距来自 header 실제 너비(거의 40rem)에 적용되는 경우.

그저 원한다면
header 有最大宽度而不是 main，您可以通过添加 width: 100% 来实现您想要的结果 到 .container

으아악 으아악