How to make nav bar stay in the middle

Question

I'm trying to centralize my nav bar, I've tried text align center, and margin auto, but it stays fixed to the left. I also tried to add a width, but still it stays fixed. Thanks in advance for your help. Please check out the JSFIDDLE . The HTML is as follows:

   <section class="contain">
   <div id="section-nav" class="section-nav">
   <div class="top">
   <ul>
   <li class="logo"><a href="#">Magna Contra</a></li>
   <li class="active"><a href="#">Festival: Paris</a></li>
   <li><a href="#">Festival: Paris</a></li>
   <li><a href="#">Festival: Paris</a></li>
   <li><a href="#">Festival: Paris</a></li>
   </ul>
   </div>
   </section>

And the CSS:

          ul
          {
          list-style-type:none;
          margin:0;
          padding:0;
          }
          li
          {
          display:inline;
          padding:15px;
          text-align: center;
          margin: auto 0;
          }

          li a{
            text-decoration: none;
            color:#bbbbbb;
            font-family: "proxima-nova",sans-serif;
            text-transform: uppercase;
            text-align: center;
            font-size: 0.78em;
          letter-spacing: .2em}

          li a:hover{
            color:white;
          }

          .logo a{
            color:#bbb;
            font-size: 0.78em;
            text-decoration: none;
            text-transform: uppercase;
          }

          .logo a:hover{
          color:white;
          }
          .active a{
            color:white;
          }

          .container {
            display: table;
            width:980px;
            height: 100%;
          }

          .contain{
            display: table;
            width: 100%;
            text-align: center;
            margin: 0 auto;
          }
          .block {
            display: table-row;
            height: 1px;
          }
          .navigation {
            display: inline-block;
            padding: 10px;
            width:100%;
            margin: auto;
            height: 150px;
          }

          .top {
            background-color: #444;
            width:100%;
            display: inline-block;
            padding: 10px;
            text-align: left;

          }

          .navigation:nth-child(odd) {
            background: #222;

          }
          .push {
            height: auto;
          }
          .container {
            margin: 0 auto;
            text-align: center;
          }
          .block:nth-child(odd) {
            background: #fff;
          }


          .search {
          border:0px; 
          background-color:transparent; 
          color:white;
          display: inline-block;
          height:28px;
          }

          .section-nav a{-webkit-transition:400ms;-moz-transition:400ms;-o-transition:400ms;transition:400ms;color:#bbb;font-weight:700;outline:0;text-decoration:none}
          .section-nav a.active,.section-nav a:hover{color:#fff;text-decoration:none}

Answer 1

Your div "section-nav" is not closed. I would fix this first.

You have also applied text-align:left to your .top div, which is the main container for the navigation buttons.

Answer 2

The easiest option is to add text-align: center to the ul :

ul
{
    list-style-type:none;
    margin:0;
    padding:0;
    text-align: center;
}

I would also set the li s to display: inline-block to give you more control over their styling.

Answer 3

In the given fiddle you have

.top {

  text-align: left;

}

change it to

.top {
   text-align: center
}

fidd -> http://jsfiddle.net/ztyUF/2/ Is this what u ve asked?

Answer 4

I used this when I had the same problem and have pretty much duplicated it for multiple sites. He explains it much better than I can.

http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support