title: My Horizontal Navigation Bar Won't Display Horizontally, Why?
body: <p>My <code>navbar</code>  refuses to display horizontally. I have put all li elements floating to the left and added the <code>display:inline-block</code> element to the individual blocks and to the list elements and to the list itself and tried every combination. I finally got the list to how I like it and now the only thing keeping this list from being perfect is that it is not displaying horizontally. WHY???</p>
  
  <pre><code>&lt;head&gt;
      &lt;title&gt;Troop 25 Homepage&lt;/title&gt;
      &lt;style&gt;
          .navbar {
              float: top;
              width: 182.8px;
              height: 30px;
              display: inline-block;
          }
  
          li {
              float: left;
              display: inline-block;
          }
  
          .nav {
              list-style-type: none;
              margin: 0;
              padding: 0;
              position: relative;
              display: inline-block;
          }
  
          a:link, a:visited {
              display: inline-block;
              width: 182.8px;
              line-height: 30px;
              padding-top: 13px;
              padding-right: 5px;
              padding-bottom: 4px;
              padding-left: 5px;
              text-decoration: none;
              text-align: center;
              background-color: #006b00;
              color: white;
              font-weight: bold;
              float: left;
          }
  
          a:hover, a:active {
              background-color: #C0C0C0;
          }
  
          a:active {
              color: grey;
          }
  
          .nav_bar_text {
              font-size: 17px;
          }
  
          .Mackin_text {
              font-size: 17px;
              vertical-align: text-center;
          }
  
          h1 {
              text-decoration: underline;
              color: #006b00;
          }
  
          p {
              font-size: 30px;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  </code></pre>
  
  <p>Here is my HTML for my list.</p>
  
  <pre><code> &lt;div class="navbar"&gt;
      &lt;ul class="nav"&gt;
          &lt;li&gt;&lt;a class="nav_bar_text" href=#Home&gt;Home&lt;/li&gt;&lt;/a&gt;
          &lt;li&gt;&lt;a class="nav_bar_text" href="#Resources"&gt;Resources&lt;/li&gt;&lt;/a&gt;
          &lt;li&gt;&lt;a class="nav_bar_text" href="#Calendar"&gt;Calendar&lt;/li&gt;&lt;/a&gt;
          &lt;li&gt;&lt;a class="nav_bar_text" href="#Year Plan"&gt;Year Plan&lt;/li&gt;&lt;/a&gt;
          &lt;li&gt;&lt;a class="nav_bar_text" href="#Gallery"&gt;Gallery&lt;/li&gt;&lt;/a&gt;
          &lt;li&gt;&lt;a class="nav_bar_text" href="#Videos"&gt;Videos&lt;/li&gt;&lt;/a&gt;
          &lt;li&gt;&lt;a class="Mackin_text" href="#Mackin Society"&gt;Mackin Society&lt;/li&gt;&lt;/a&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>