Can i ignore a max-width in body-CodePudding

i want the content on my page to have a max-widht of 2024px, but i want my navbar to span the whole page

Unfortunately I have no idea how to solve it

CodePudding user response：

Just put the content of your page in a main tag and set the max width of your main to 1024px

main {
  max-width: 1024px;
}

nav {
  width: 100%;
}

<html>
  <body>
    <header>
      <nav>
        <ul>
          <li>Lorem</li>
        </ul>
      </nav>
    </header>
    <main>
      <h1>Lorem</h1>
      <p>Lorem</p>
    </main>
  </body>
</html>

CodePudding user response：

<body>
    <header>
        <img src="" alt="Logo">

        <nav>
            <ul>
                <li>
                    <a href="#">Home</a>
                </li>

                <li>
                    <span>|</span>
                </li>

                <li>
                    <a href="/">Lorem Ipsum</a>
                </li>

                <li>
                    <span>|</span>
                </li>
                
                <li>
                    <a href="/">Lorem Ipsum</a>
                </li>

                <li>
                    <span>|</span>
                </li>

                <li>
                    <a href="/">Lorem Ipsum</a>
                </li>

                <li>
                    <span>|</span>
                </li>

                <li>
                    <a href="#">Lorem Ipsum</a>
                </li>
            </ul>
        </nav>
    </header>


    <h1 id="main_title">
        Lorem Ipsum
    </h1>

    <p id="main_text">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod veritatis, aliquid omnis, autem quaerat culpa consectetur provident dicta repellat numquam eveniet distinctio. Accusantium exercitationem eos nam quia odit ipsa reprehenderit?
    </p>

</body>
</html>

body {
    background-color: #242424;
    max-width: 1024px;
}


header {
    z-index: 99;
    display: flex;
    border-bottom: #242424;
    box-shadow: 0px 4px 20px #000000;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    width: 100%;
    top: 0;
    backdrop-filter: blur(25px);
    
    img {
        width: 100px;
        padding: .75rem
    }

    nav {
        margin: 0 3rem 0 0;

        ul {
            li {
                display: inline;
                list-style-type: none;
                padding: 0 .5rem 0 .5rem;

                a {
                    font-size: 1.3rem;
                    transition: 2s;

                    ::hover {
                        transform: translateX(10px);
                    }
                }
                span {
                    font-size: 1.5rem;
                    color: #fff;
                }
            }
        }
    }
}