Aligning/floating my nav bar to the right

Question

I'm currently attempting to align my nav bar to the right, but it's stubbornly sticking to the left and I don't know what to do. I feel like I've tried everything - text-align, float, etc. I also have HTML5 CSS reset included, if that makes a difference.

Can someone look at my code and let me know if there may be some reason that these nav items won't move to the other side? I'm really frustrated. Thanks.

HTML:

<ul>
  <li><a href="index.html">Home</a></li>
  <li><a href="company.html">Company</a></li>
  <li><a href="team.html">Management Team</a></li>
  <li><a href="contact.html">Contact</a></li>
</ul>

CSS:

  body {font: normal 300 .8em 'Open Sans', sans-serif; overflow-x: hidden;}
  ul {text-align: right; width: 100%; background-color: #999; height: 20px; padding-  left: 150px;}
  li {float: left;}
  ul a {color: white; padding: 0 10px; text-decoration: none;}
  ul a:hover {color: #333;}

NOTE: This is the hacky way that I just fixed it

ul {text-align: right; width: 100%; background-color: #999; height: 20px; **padding-left: 750px;**}

however, I'm not sure that that is a very good way to do so...

Answer 1

One, admittedly quite stupid solution (but it works), is to float list items to the right and then just reverse their order in HTML. Like this:

<ul>
  <li><a href="contact.html">Contact</a></li>
  <li><a href="team.html">Management Team</a></li>
  <li><a href="company.html">Company</a></li>
  <li><a href="index.html">Home</a></li>
</ul>

body {font: normal 300 .8em 'Open Sans', sans-serif; overflow-x: hidden;}
ul {text-align: right; width: 100%; background-color: #999; height: 20px;}
li {float: right;}
ul a {color: white; padding: 0 10px; text-decoration: none;}
ul a:hover {color: #333;}

here is the JSFiddle for it