Inline unordered list isn't centering properly - html

Question

I have a super simple site, here that uses a sticky nav bar. The list items are a couple of spots off to the left and I can't figure out why. I've tinkered with all the margins and padding I can think of, but it won't budge. I should also point out that I'm using Bootstrap.
Here is my HTML:
<div id="nav-wrapper">
<div id="nav" class="navbar navbar-inverse affix-top" data-spy="affix">
<div class="navbar-inner" 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>Home</li>
<li>Services</li>
<li>Contact</li>
</ul><!--/.nav-->
</div><!--/.nav-collapse collapse pull-right-->
</div><!--/.container-->
</div><!--/.navbar-inner-->
</div><!--/#nav /.navbar navbar-inverse-->
</div><!--/#nav-wrapper-->
And here is my CSS that relates to my navigation:
.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 {
float:none;
display:inline-block;
*display:inline; /* ie7 fix */
*zoom:1; /* hasLayout ie7 trigger */
vertical-align: top;
padding:0 2em;
margin:0;
}
.navbar-inner {
text-align:center;
margin-bottom:0;
}
.navbar-inner ul.nav li {
text-align: center;
}
.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;
}
.navbar .nav > .active a:hover, .navbar .nav > li a:hover, .navbar .nav > .active a {
color:white;
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;
}
#nav.affix, #nav.affix-bottom {
position: fixed;
top: 0;
width: 100%
}
#nav {
position:relative;
z-index:999;
-webkit-perspective: 1000; -webkit-backface-visibility: hidden;
}
I know it's a minor detail, but I've been trying to fix it for days now and can't figure out why it's being a pain.
Thanks for your help,
Brian

Answer 1

You have a right margin of 10px on the .navbar .nav(bootstrap.min.css:9) which pushes it a bit to the left.
Change this:
.navbar .nav {
display:block;
float:left;
left:0;
margin:0 10px 0 0;
position:relative;
}
to this:
.navbar .nav {
display:block;
float:left;
left:0;
margin:0;
position:relative;
}

Answer 2

The good news, is here is how to center the list items:
Add a class called ".center" like so:
<div class="navbar navbar-fixed-top center">
<div class="navbar-inner">
....
</div>
</div>
And then use this CSS:
.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;
}
To realign the drop down menus, use this:
.center .dropdown-menu {
text-align: left;
}
This was taken from a previous answer.
Now, the bad news, is that solution also centers the menu items on the mobile-menu drop down for tablet and mobile viewports. I literally just posted a question on there ten minutes ago here:
How to Override/Undo CSS Class Attributes for Twitter Bootstrap
If you find a solution, please let me know because we are both asking the same question!