bootstrap navbar height code example
Example: bootstrap navbar 100 width
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;
}