htmlcssflexboxresponsive-designnavigation

How to Center Navigation Content and Ensure Background Stretches Full Width on Large Screens?

I'm trying to optimize my website's navigation bar for large screens, and I'm facing two issues:

  1. The content inside the navigation bar is not centered when the screen width exceeds 800px.

  2. The background color of the navigation bar doesn't stretch across the full width of the screen; it stops at 800px.

How can I modify my CSS to ensure the content inside the .max-width container is centered within the 800px limit. Secondly make the background color of the navigation bar extend across the entire width of the screen, while keeping the content centered?

Here is my code:

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>

Solution

  • Move your flex layout menu elements inside an element which applies the max width. Separate those concerns.

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

.nav-inner {
  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>
  <div class="nav-inner 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>
  </div>
</nav>