title: Centering inline list
body: <p>I'm trying to center a list of items.  I've checked on a few other similar questions, but can't seem to find the right combination of tweaks.  </p>
  
  <p>I have a number of containers/sub-containers, but I'm primarily interested in the menu-nav:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
      .content {
          position: relative;
          border-top-width: 1px;
          width: 100%;
          min-width: 960px;
          margin-top: -1px;
      }
  
      .content-container {
          border: 0;
          position: relative;
          width: 960px;
          border-radius: 0 0 0 0;
          margin: 0px auto;
      }
  
      .full-content-container {
          vertical-align: top;
          display: inline-block;
          min-height: 900px;
          width: 958px;
          height: 100%;
          position: relative;
          padding: 15px 0 0 0;
      }
  
      .browse-container {
          padding: 16px 0 0 0;
          font-size: 12px;
          width: 958px;
          text-align: center;
      }
  
      #menu-nav {
          margin:0; 
          padding:0; 
          list-style:none;
          float: left;
      }   
  
      #menu-nav li {
          float: left;
          display:block; 
          background-color: #6F7D94;
          position:relative;
          z-index:500; 
          margin:0 1px;
      }
  
      #menu-nav li a {
          display:block; 
          padding:5px 10px 5px 10px; 
          font-weight:200;  
          text-decoration:none; 
          text-align:center; 
          color:#fff;
      }
  
      #menu-nav li a:hover {
          background:#ccc; 
          color:#000;
          text-decoration:underline;  
      }
  
  &lt;/style&gt;
  </code></pre>
  
  <p>How can I horizontally center the following menu?</p>
  
  <pre><code>&lt;body&gt;
  
  &lt;div class="content"&gt;
      &lt;div class="content-container"&gt;
          &lt;div class="full-content-container"&gt;
              &lt;div class="browse-container"&gt;
                  &lt;ul id="menu-nav"&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Menu 1&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Menu 2&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Menu 3&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>