title: Horizontal nav bar centers, but links are vertical?
body: <p>So basically my issue is my CSS centers the nav bar fine, but all the links are listed vertically in the horizontally centered bar.</p>
  
  <p>It ends up looking like <br>
  <a href="http://i.imgur.com/rqcXwk4.png" rel="nofollow">http://i.imgur.com/rqcXwk4.png</a><br>
  But I need those links to be horizontal.</p>
  
  <pre><code>&lt;nav id="nav"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#about"&gt;About&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#baa"&gt;Description&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>And the CSS</p>
  
  <pre><code>}
  nav ul {
  display:inline;
  }
  .nav li{
      display:inline;
  }
  .nav a{
      float:left;
    display:inline-block;    
    padding:10px;
  }
  nav a:link, a:visited {
      display: block;
      width: 100%;
      font-family: Refrigerator;
      font-weight: bold;
      font-size: 1.5em;
      color: #FFFFFF;
      background-color: #778899;
      text-align: center;
      padding: 4px;
  }
  
  nav a:hover, a:active {
      background-color: #FF3333;
      color: black;
  }
  </code></pre>