导航栏背景色

Question

如何使 header 的 background-color 覆盖 100%，同时保持导航栏内容为 70%。在我下面的代码中，背景颜色被限制为我的导航栏的宽度，即 70%

HTML

<body>
    <header>
        <nav class="navbar">
            <div class="logo-box">
                <a href="index.html" class="logo">MOVIES</a>
            </div>

            <div class="search-box">
                <form action="https://www.google.com/search" method="get">
                    <input id="seach-bar" name="q" type="search" placeholder="Search MOVIES" autocomplete="off">
                    <button id="search-button" type="submit" class="search">Search</button>
                </form>
            </div>

            <div class="nav-links">
                <ul>
                    <li><a href="#" class="links">Genres</a></li>
                    <li><a href="#" class="links">Celebs</a></li>
                    <li><a href="#" class="links">My List</a></li>
                </ul>
            </div>
        </nav>
    </header>

CSS:

body {
    background-color: black;
}

header {
    display: flex;
    justify-content: center;
}

.navbar, main {
    width: 70%;
    margin: 0 auto;
}

.navbar {
    position: fixed;
    background: #1a1c1b;
    padding: 5px 0;
}

Answer 1

将您的 CSS 更改为：

body {
    background-color: black;
}

header {
    background-color: red;
    display: flex;
    justify-content: center;
    position: fixed;
    widtH: 100%;
}

.navbar, main {
    width: 70%;
    margin: 0 auto;
}

.navbar {
    background: #1a1c1b;
    padding: 5px 0;
}

https://jsfiddle.net/j1890erf/1/

导航栏背景色

navigation bar background color

html

css

navbar