Bootstrap navbar 100% width not working

Question

On my bootstrap nav bar I am trying to make to go to the full with on page even when nav bar is on top of image.

But I have tried width 100% on .navbar-wrapper and navbar and navbar-default But for some reason the navbar will still not go full width of page.

Live Examples

Here is my codepen Code View

Here is my codepen Full View

Question How can I make my navbar width 100% work so it goes to the full width of page?

CSS

/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    width: 100% !important;
    left: 0;
    z-index: 20;
}

/* Flip around the padding for proper display in narrow viewports */
.navbar-wrapper > .container {
    padding-right: 0;
    padding-left: 0;
}

.navbar-wrapper .navbar {
    padding-right: 15px;
    padding-left: 15px;
    width: 100% !important;
}

.navbar-inverse {
  width: 100% !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
}

.navbar-inverse .nav > li > a {
    color: #FFFFFF;
}

.navbar-inverse .nav > li > a:hover {
    background: none;
}

.navbar-brand a {
    color: #FFFFFF;
}

.main-header-background {
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center; 
    background-image: url('./images/stars/img-stars-2.jpg');
    height: 620px;
    width: 100%;
    margin-bottom: 60px;
}

HTML

<div class="navbar-wrapper">
<div class="container">

<nav class="navbar navbar-inverse">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand">
<a href="#">Brand</a>
</div>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>

<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>

</div><!-- /.navbar-collapse -->
</nav>
</div>
</div>

<div class="main-header-background">
</div>  

Answer 1

You could get the width of the navbar to go the full length of the page by making the container inherit from ".navbar-wrapper". You may also want to get rid of the padding you have set in ".navbar-wrapper .navbar"

The following styles worked for me: See codpen: http://codepen.io/JordanLittell/pen/wadWxv

/* Special class on .container surrounding .navbar, used for positioning it into place. */

.navbar-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    width: 100% !important;
    left: 0;
    z-index: 20;
}

/* Flip around the padding for proper display in narrow viewports */
.navbar-wrapper > .container {
    padding-right: 0;
    padding-left: 0;
    width: inherit;
}

.navbar-wrapper .navbar {
    width: 100% !important;
}

.navbar-inverse {
  width: 100% !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
  border-radius: 0;
}

.navbar-inverse .nav > li > a {
    color: #FFFFFF;
}

.navbar-inverse .nav > li > a:hover {
    background: none;
}

.navbar-brand a {
    color: #FFFFFF;
}

.main-header-background {
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center; 
    background-image: url('http://www.riwakawebsitedesigns.com/external/images/stars/img-stars-2.jpg');
  height: 620px;
  width: 100%;
  margin-bottom: 60px;
}

Answer 2

Seems you are using .container class instead of container-fluid class. As per bootstrap documentation:

Turn any fixed-width grid layout into a full-width layout by changing your outermost .container to .container-fluid.

http://getbootstrap.com/css/#grid-example-fluid

updated codepen: http://codepen.io/anon/pen/gpWMzJ

Answer 3

You should use the class container-fluid instead of container.

• container has predefined width values for the different screen sizes (xs, sm, md, lg)

• container-fluid fills the available width

Also container's have some padding applied, and generally they are used in conjunction with row's that have the inverse margin.

So if you want full-width you either have to wrap your navbar in a row (inside your container) or you just don't use container's at all.

Answer 4

I know this is an old one, but still relevant now, especially with the world of modern CSS frameworks!

I had my "row" class on the nav, because inside the nav I wanted to control elements with Bootstrap's grid system.

So it looked something like:

<nav class="navbar row"></nav>

What I needed to do was remove row from the nav itself and place it inside the the div. So it changed to:

<nav class="navbar> <div class="row"> </div> </nav>

It seemed to be a problem with Bootstrap's grid system itself. Hope this helps anyone out there!