Kevin Powell - Community•3mo ago

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

Hello everyone, 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? Thank you very much. Here is my code: https://jsfiddle.net/10moqsLn/20/

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

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

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

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

Edit fiddle - JSFiddle - Code Playground

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

2 Replies

Chris Bolson•3mo ago

I’m on the mobile so I can’t test anything or even view your jsfiddle but from what I can see of the code that you have posted, the quickest solution would be to move your max-width and margin declarations to the <ul>

Tok124 (CSS Nerd)•3mo ago

Here is one way to do it

Gaming

Programming

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