Search code examples
htmlcsswidthnavbarnav

Navbar color is not full width


I am trying to create a full-width navbar, but it does not go full width.

This is the part of the CSS of the nav:

This is what it looks:


Solution

  • Ok so i was able to solve your problem. You are using bootstrap in your html. Bootstrap has an element with class "container" and it has a media query at min-width: 1200px that sets the max-width of the container class to 1140px. WHich is why you're nav bar can't go wider than 1140px.

    To solve this problem, the best way is to simply change your container class to .my-container or something similar.

    Here's an example:

    HTML

    <div class="my-container"> 
        <nav>navbar with 100% width...</nav>
    </div>
    

    CSS

    .my-container {
        width:100%;
    }
    nav {
        width:100%;
    }
    

    That will fix your problem.