title: Why has the web browser reversed my menu options?
body: <p>I have a main menu, and in the HTML code, it is in the correct order, but when viewed in the browser, it is reversed. Why?</p>
  
  <p>HTML:</p>
  
  <pre><code>  &lt;div class="header"&gt;
      &lt;img src="images/JTS_1_B_FL31.png" alt="J.T.S Logo" class="logo" /&gt;
      &lt;ul class="menu"&gt;
        &lt;li class="current"&gt;&lt;a href="index.php"&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="services.php"&gt;Services&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="support.php"&gt;Support&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="contact.php"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="myaccount/"&gt;My Account&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.header{
    width: 100%;
    height: 30px;
  
    background-color: #1D242D;
  }
  .logo{
    padding: 5px 0 0 5px;
    float: left;
    }
  .menu{
    float: right:
  }
  li{
    display: inline;
    list-style: none;
    float: right;
    padding: 5px 5px 7px 5px;
  
  }
  </code></pre>
  
  <p>Screenshot:</p>
  
  <p><img src="https://i.stack.imgur.com/Wm5US.png" alt="enter image description here"></p>