如何将导航内容居中并确保背景在大屏幕上拉伸全宽？

Question

我正在尝试针对大屏幕优化网站的导航栏，但我面临两个问题：

1. 当屏幕宽度超过800px时，导航栏内的内容不居中。

2. 导航栏的背景颜色不会延伸到屏幕的整个宽度；它停在 800 像素处。

如何修改 CSS 以确保 .max-width 容器内的内容在 800px 限制内居中。其次让导航栏的背景颜色延伸到屏幕的整个宽度，同时保持内容居中？

这是我的代码：

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    color: white;
}

.max-width {
    max-width: 800px;
    margin: 0 auto;
}

nav {
    background-color: #333;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
}

nav ul li a {
    color: white;
    text-decoration: none;
    padding: 15px 20px;
    display: block;
}

nav ul li a:hover {
    background-color: #555;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    border-radius: 4px;
}

<nav class="max-width">
    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#services">Services</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
    <div>
        <span>Light | Dark</span>
    </div>
</nav>

Answer 1

更新代码

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    color: white;
}

nav {
    background-color: #333;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    width: 100%;
    padding: 0 20px;
}

nav .max-width {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 10px; /* Space between navigation links */
}

nav ul li {
    margin: 0;
}

nav ul li a {
    color: white;
    text-decoration: none;
    padding: 15px 20px;
    display: block;
}

nav ul li a:hover {
    background-color: #555;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    border-radius: 4px;
}

nav .extra-content {
    color: white;
    display: flex;
    align-items: center;
    font-size: 16px; /* Adjust font size as needed */
}

<nav>
    <div class="max-width">
        <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#services">Services</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
        <div class="extra-content">
            <span>Light | Dark</span>
        </div>
    </div>
</nav>