Q:

Bootstrap Horizontal NavBar span width of page

How can I get a horizontal navbar to span 80% of the width of the page? 
I set up my navbar like so:
<div class="navbar navbar-default navbar-centered" role="navigation">
        <ul class="nav navbar-nav">
            <li><a class="navbar-button" role="button" href="#home">HOME</a></li>
            <li><a class="navbar-button" role="button" href="#about">ABOUT</a></li>
            <li><a class="navbar-button" role="button" href="#gallery">GALLERY</a></li>
            <li><a class="navbar-button" role="button" href="#products">PRODUCTS</a></li>
            <li><a class="navbar-button" role="button" href="#contact">CONTACT</a></li>
        </ul>
    </div>

It's horizontally centered and the elements stack up vertically when the page is resized. 
However, the elements are all clustered near the center of the page and I want them to spread out. 
My CSS looks like this:
.navbar-button {
background-color: white;
color: inherit;
border: 3px solid blue;
border-radius: 0px;
}

.navbar {
    background-color: green;
    border: 0px;
    padding: 0px;
}

/*Center the navbar elements when collapsed*/
.navbar .navbar-collapse {
    text-align: center;
}

@media (min-width: 768px) {
    .navbar-centered .navbar-nav {
        float: none;
        text-align: center;
    }
    .navbar-centered .navbar-nav > li {
        float: none;
    }
    .navbar-centered .nav > li {
        display: inline;
    }
    .navbar-centered .nav > li > a {
        display: inline-block;
    }
}

A:

Add this lines to CSS:
@media(max-width:767px) {
.navbar {
    max-width:80%;
    margin:auto;
    /* float: left;  or right as you want and then remove margin: auto*/
}

}
@media(min-width:768px) {
    /* add here also if you want to have big menu 80% width */
}
@media(min-width:992px) {
    /* add here also if you want to have big menu 80% width */
}
@media(min-width:1200px) {
    /* add here also if you want to have big menu 80% width */
}

See DEMO

