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

Coder
August 23, 2024
131 views
1 vote
2 Answers

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

The content inside the navigation bar is not centered when the screen width exceeds 800px.
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>

Answers

Fixes to Prevent Horizontal Scrolling:

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

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

nav .max-width {
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
}

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

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

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

Additional Recommendations:

Test on Different Devices:

Purpose: Ensure the design adapts well across various screen sizes and devices.
Effect: Helps identify and fix any layout issues that may not be apparent on all screens.

Use Media Queries:

Purpose: Apply different styles based on screen size.
Effect: Provides a way to adjust font sizes, padding, or other styles for smaller screens.

@media (max-width: 600px) {
    nav ul {
        flex-direction: column; 
    }
    nav .extra-content {
        font-size: 14px;
    }
}

Include Viewport Meta Tag:

Purpose: Ensure proper scaling and layout on mobile devices.
Effect: Makes the page responsive and avoids layout issues on different devices.

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>

Please signup or login to give your own answer.

Click here to cancel reply.

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

Answers