title: CSS/HTML Trying to center nav ul element
body: <p>I'm just messing around on jsfiddle trying to practice and I came across an issue that I couldn't solve. So hopefully some of you could help me a bit here. This seems like such a silly question on the very basics of CSS but for some reason this one has me.</p>
  
  <p>Basically I created a generic navigation on jsfiddle and I need the ul element centered. I'm not sure why they are stuck on the left side of the screen.</p>
  
  <p><a href="http://jsfiddle.net/jrich/ker1jLdf/" rel="nofollow">http://jsfiddle.net/jrich/ker1jLdf/</a></p>
  
  <p>CSS and HTML as follows:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>       body {
          background-color: #45859E;
          font-family:'Open Sans', sans-serif;
          font-style: normal;
          font-weight: 400;
          font-size: 12px;
          margin: 0;
          padding: 0;
      }
      ul {
          padding: 0;
          margin: 0 auto;
      }
      a:link {
          text-decoration: none;
      }
      h3 {
          padding: 5px;
          margin: 0;
      }
      header {
          width: 100%;
          background-color: #FFF;
          margin: 0 auto;
          border-bottom: solid 5px #00729B;
      }
      #nav {
          margin: 0 auto;
          padding: 10px 0;
      }
      #nav ul {
          width: 100%;
          margin: 0 auto;
      }
      #nav ul li {
          text-align: center;
          width: 100px;
          display: inline-block;
          border-bottom: solid 5px #00729B;
          color: #000 border-radius: 50px;
          -moz-border-radius: 50px;
          -webkit-border-radius: 50px;
          margin: 0 auto;
      }
      ul li h3 {
          text-transform: uppercase;
      }
      ul li:hover {
          color: #999999;
          border-color: #00729B;
          background: #ffffff;
          /* Old browsers */
          background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 78%, #ffffff 78%, #00729b 100%);
          /* FF3.6+ */
          background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(78%, #ffffff), color-stop(78%, #ffffff), color-stop(100%, #00729b));
          /* Chrome,Safari4+ */
          background: -webkit-linear-gradient(top, #ffffff 0%, #ffffff 78%, #ffffff 78%, #00729b 100%);
          /* Chrome10+,Safari5.1+ */
          background: -o-linear-gradient(top, #ffffff 0%, #ffffff 78%, #ffffff 78%, #00729b 100%);
          /* Opera 11.10+ */
          background: -ms-linear-gradient(top, #ffffff 0%, #ffffff 78%, #ffffff 78%, #00729b 100%);
          /* IE10+ */
          background: linear-gradient(to bottom, #ffffff 0%, #ffffff 78%, #ffffff 78%, #00729b 100%);
          /* W3C */
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
      &lt;header&gt;
          &lt;div id="nav"&gt;
              &lt;ul&gt;
                  &lt;li id="one"&gt;
                       &lt;h3&gt;&lt;a href=""&gt;Home&lt;/a&gt;&lt;/h3&gt;
      
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;h3&gt;&lt;a href=""&gt;About&lt;/a&gt;&lt;/h3&gt;
      
                  &lt;/li&gt;
                  &lt;li&gt;
                       &lt;h3&gt;&lt;a href=""&gt;Contact&lt;/a&gt;&lt;/h3&gt;
      
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/header&gt;
      &lt;/body&gt;
  
  
   </code></pre>
  </div>
  </div>
  </p>
  
  <p>Thanks!</p>