Center Bootstrap Navbar -- do not understand why navigation won't center

Question

I just started to learn bootstrap today and I was working with their example on this page http://getbootstrap.com/examples/offcanvas/

As you can see if you go to that page, the navigation is aligned to the left. I have attempted to use what I do in normal CSS, which is:

margin-right:auto and margin-left:auto

I also tried

text-align:center

Neither of these have worked and I have read their navigation documentation and I don't understand what I am suppose to do differently here.

Below is code from that navigation page. I have attempted to put the tags in all 4 navigation containers at once and individually:

<div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
      <div class="container">
        <div class="navbar-header" >
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div class="navbar-collapse collapse" style="height: 1px;margin: auto;text-align: center;">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!-- /.nav-collapse -->
      </div><!-- /.container -->
    </div>

Answer 1

There's only two directions of the navigation in Bootstrap, left or right. To center the navbar, there's a couple of methods. This is what I do for one of them. Following this are two example links:

@media (min-width:768px) { 
/* centered navigation */
 .nav.navbar-nav {
     float: left;
 }
 .nav.navbar-nav {
     clear: left;
     float: left;
     margin: 0;
     padding: 0;
     position: relative;
     left: 50%;
     text-align: center;
 }
 .nav.navbar-nav > li {
     position: relative;
     right: 50%;
 }
 .nav.navbar-nav li {
    text-align: left
 }
}

This is a modified version of the above. I have no idea what you're doing with the logo.

DEMO 1: http://jsbin.com/iJaJAzIM/3/

http://jsbin.com/iJaJAzIM/3/edit?html,css,js,output

---

This is another approach:

@media (min-width:768px) { 
 .navbar > .container {
    text-align: center;
 }
 .navbar-header {
    float: none;
    display: inline-block;
 }
 .navbar-brand {
    float: none;
    display: inline-block;
 }
 .navbar .navbar-nav {
    float: none;
    display: inline-block;
    clear: none;
 }
 .navbar .navbar-nav > li {
    float: none;
    display: inline-block;
 }
 .navbar .navbar-nav > li li {
    text-align: left
 }
 /*add id of centerednav on the collapse or it won't work*/
 .collapse.navbar-collapse#centerednav {
    float: none;
    display: inline-block!important;
    width: auto;
    clear: none;
 }
}

DEMO 2:http://jsbin.com/iJaJAzIM/6/

http://jsbin.com/iJaJAzIM/6/edit