Bootstrap navbar will not center no matter what

Question

I have been having a dreadful time trying to center my navbar li in the center of my navbar using Bootstrap. I have tried using info from similar questions such as this one, this one, and this one. My navigation doesn't use pills or tabs, but I was hoping I could edit my code accordingly. My site uses a sticky nav, which is probably the most complicated thing on my page. I've create a JSFiddle using the same code I've uploaded, but for some reason the JSFiddle code properly aligns everything, whereas on my page, all the links are offset to the right 10 or so pixels. I've tried setting all my margins and padding to 0 as well, still no luck.

Can somebody please help me, this is annoying the crap out of me and I'm about to throw my computer off the roof! If you can solve my problem I'll bake you some cookies.

Thanks,

Brian

P.S. Sorry for all the links :-/

Here's my JSFiddle

Here's my HTML:

<div id="nav-wrapper">
<div id="nav" class="navbar navbar-inverse affix-top center" data-spy="affix">
  <div class="navbar-inner pull-center" data-spy="affix-top">
    <div class="container">

      <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>

      <!-- Everything you want hidden at 940px or less, place within here -->
      <div class="nav-collapse collapse">
        <ul class="nav">
            <li><a href="#home">Home</a></li>
            <li><a href="#service-top">Services</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul><!--/.nav-->
      </div><!--/.nav-collapse collapse pull-right-->
    </div><!--/.container-->
  </div><!--/.navbar-inner-->
</div><!--/#nav /.navbar navbar-inverse-->
</div><!--/#nav-wrapper-->

Here's my mess of a CSS:

.navbar {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    padding:0;
    z-index:999;
    margin-bottom:0;
}
.navbar.navbar-inverse .navbar-inner {
    background: #390 url(../img/green-bg.png) repeat;
    border:none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    margin-bottom:0;
}
.navbar .nav, .navbar .nav > li {
    display:inline-block;
    *display:inline; /* ie7 fix */
    *zoom:1; /* hasLayout ie7 trigger */
    vertical-align: top;
    padding:0 10px;
    margin:0 auto;
}
.navbar .nav > li a {
    color:white;
    background:rgba(0, 0, 0, 0.2);
    text-shadow:none;
    font-size:1.5em;
    font-family: marvel, serif;
    padding:.5em 1em;
    margin:.5em 1em;
    min-width:90px;
}
.navbar .nav > .active a:hover, .navbar .nav > li a:hover, .navbar .nav > .active a {
    color:#FFF;
    background: #390 url(../img/green-bg.png) repeat;
    text-shadow:none;
    font-size:1.5em;
    font-family: marvel, serif;
    padding:.5em 1em;
    margin:.5em 1em;
    -webkit-box-shadow: inset 0 0 10px #000;
    -moz-box-shadow: inset 0 0 10px #000;
    box-shadow: inset 0 0 10px #000;
}
.navbar .nav > li {
    padding:1em;
    margin:0;
    width:10em;
}
#nav.affix, #nav.affix-bottom {
    position: fixed;
    top: 0;
    width: 100%;
    -webkit-box-shadow: 0px 2px 4px #000;
    -moz-box-shadow: 0px 2px 4px #000;
    box-shadow: 0px 2px 4px #000;
}
#nav {
    position:relative;
    z-index:999;
    -webkit-perspective: 1000;
    -webkit-backface-visibility: hidden;
}
.center.navbar .nav, .center.navbar .nav > li {
    float:none;
    display:inline-block;
    *display:inline; /* ie7 fix */
    *zoom:1; /* hasLayout ie7 trigger */
    vertical-align: top;
}
.center .navbar-inner {
    text-align:center;
}

Answer 1

Try adding this class to ul after nav

.nav-center {
    float: none;
}

this will override the float: left which comes from bootstrap.css.

Answer 2

.navbar .nav > .active a:hover, .navbar .nav > li a:hover, .navbar .nav > .active a and .navbar .nav > li a both have a rule of margin: 0.5em 1em;. Change it to margin: 0.5em 0;.

.navbar .nav, .navbar .nav > li has a rule of float: center;. Remove it.

Add this rule:

.navbar .nav {
    float: none;
}

Answer 3

Try changing

.navbar .nav, .navbar .nav > li {
    float:center;
    ...

to

.navbar .nav, .navbar .nav > li {
    text-align:center;
    ...

As far as I know there is no such thing as float center. Only left, right, none, and inherit.