title: Horizontal navigation can't align to right
body: <p>I know this has been discussed here before - as I've read through a lot of questions about the same thing. And have tried the solutions, but I just can't seem to make this stupid nav right align (needing li blocks to align to the right). Can someone please point out my mistake - thank you.</p>
  
  <p><a href="http://jsfiddle.net/gstricklind/vP38J/4/" rel="nofollow">http://jsfiddle.net/gstricklind/vP38J/4/</a></p>
  
  <p><strong>CSS</strong></p>
  
  <pre class="lang-css prettyprint-override"><code>ul#menu-main-top {
      float: right;
  }
  .nav-bar &gt; li {
      border: 1px solid #333;
      display: block;
      float: left;
      line-height: 38px;
      margin: 0;
      padding: 0;
      position: relative;
  }
  ul#menu-main-top li a {
      color: #222222 !important;
  }
  .top-nav &gt; li &gt; a {
      color: #E6E6E6 !important;
  }
  .nav-bar &gt; li &gt; a:first-child {
      margin: 0 0 0 10px;
      padding: 0 0 0 30px;
  }
  .nav-bar &gt; li &gt; a:first-child {
      display: block;
      font-size: 14px;
      padding: 0 20px;
      position: relative;
      text-decoration: initial;
  }
  </code></pre>
  
  <p>​<strong>HTML</strong></p>
  
  <pre><code>&lt;div class="eight columns"&gt;
      &lt;ul id="menu-main-top" class="top-nav nav-bar hide-for-small"&gt;
          &lt;li id="menu-item-58"&gt;                
              &lt;a href="#"&gt;Home&lt;/a&gt;
          &lt;/li&gt;
          &lt;li id="menu-item-94"&gt;
              &lt;a href="#"&gt;Calendar&lt;/a&gt;
          &lt;/li&gt;
          &lt;li id="menu-item-59"&gt;
              &lt;a href="#"&gt;Meanings&lt;/a&gt;
          &lt;/li&gt;
          &lt;li id="menu-item-77"&gt;
              &lt;a href="#"&gt;About Us&lt;/a&gt;
          &lt;/li&gt;
          &lt;li id="menu-item-67"&gt;
              &lt;a href="#"&gt;Contact Us&lt;/a&gt;
          &lt;/li&gt;
          &lt;li id="menu-item-343" class="active"&gt;
              &lt;a href="#"&gt;My Account&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="logout"&gt;
              &lt;a href="#"&gt;Logout&lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;                    
  &lt;/div&gt;
  </code></pre>