Why menu created with ul li elements displayed in reverse order?

Instead of taking float right take it as left then you will get the result HOME TOUR PRICING FAQ

To understand it let us see :

Here you are trying to print HOME TOUR PRICING FAQ and if you will float this to the right it means you are telling to print from right and that's why it gives you the output as FAQ PRICING TOUR HOME so that's why we use float: left;

.header ul

{


}
.header li
{
    list-style-type: none;
    margin-left: 40px;
    float: left;

}

 <div class="header">
         <ul>
            <li><a  href="">HOME</a></li>
                <li><a href="">TOUR</a></li>
                 <li><a  href="">PRICING</a></li>
                <li><a  href="">FAQ</a></li>

            </ul>
  </div>

DEMO

You should float only the ul right. The list items should be floated left in the correct (expected) order:

.header ul {
    float:right;
}

// expected order. It's the default value if not overriden,
// therefore it is not realy needed
.header li
{
    float:left;
}