title: Navigation Bar text aligning backwards (CSS)
body: <p>I'm in the process of developing my first website and I'm having an issue with the Navigation Bar. I'm using CSS rules to align the bar but unfortunately when I set the rules to <code>float:right;</code> my text is floating right but it’s lining up  backwards on the bar.  How can I float the text over to the right and align the text correctly?</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>.nav ul li {
    display: inline-block;
    float: right;
    padding: 10px 10px;
  }
  .nav {
    background-color: black;
    position: fixed;
    width: 100%;
    top: 0px;
    margin: auto;
    font-weight: bold;
    border-bottom: 2px solid orange;
    margin-top: 5px;
  }
  .nav ul li a {
    color: orange;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0px 10px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="nav"&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Portfolio&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;FAQ&lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>