title: How to make nav bar stay in the middle
body: <p>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 <a href="http://jsfiddle.net/ztyUF/" rel="nofollow">JSFIDDLE</a>. The HTML is as follows:</p>
  
  <pre><code>   &lt;section class="contain"&gt;
     &lt;div id="section-nav" class="section-nav"&gt;
     &lt;div class="top"&gt;
     &lt;ul&gt;
     &lt;li class="logo"&gt;&lt;a href="#"&gt;Magna Contra&lt;/a&gt;&lt;/li&gt;
     &lt;li class="active"&gt;&lt;a href="#"&gt;Festival: Paris&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="#"&gt;Festival: Paris&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="#"&gt;Festival: Paris&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="#"&gt;Festival: Paris&lt;/a&gt;&lt;/li&gt;
     &lt;/ul&gt;
     &lt;/div&gt;
     &lt;/section&gt;
  </code></pre>
  
  <p>And the CSS:</p>
  
  <pre><code>          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}
  </code></pre>