Center Bootstrap Navbar While Preserving Style

Question

How can I center the navbar on this page, while still keeping the background gradient? I've seen some tricks where the li is set to display inline, the a to display inline-block, and the ul to align the text in the center, but these require me to add float:none to the code, which breaks my background gradient. Could someone please shed some light?

Answer 1

Add two classes in markup (with optional names, just to override CSS). Lets call it .nav-container and .menu-nav.

      <div class="navbar-inner">
        <div class="container nav-container">
          <ul class="nav menu-nav">
            <li><a href="#services">Services</a></li>
            <li><a href="#portfolio">Portfolio</a></li>
            <li><a href="#contact">Contact</a></li>
            <li><a href="#about">About</a></li>
          </ul>
        </div>
      </div>

and then add in CSS

.nav-container {
    text-align: center;
}

.menu-nav {
    float: none;
}

I've changed that in my Chrome inspector, and background gradient looks same as before that.