Горизонтальное меню ul выровнять по правому краю и выровнять по левому

Я перерыл все и не нашел точного решения для этого. Это кажется довольно простым, но в последнее время я бился головой о стену, пытаясь понять это правильно.

У меня на сайте есть простое горизонтальное меню. Я использую UL, чтобы все работало. Вот мой код:

> <div id="nav">
>           <ul>
>                 <li><a href="#">Home</a></li>
>                 <li><a href="#">company</a></li>
>                 <li><a href="#">Products</a></li>
>                 <li><a href="#">Services</a></li>
>                 <li><a href="#">Involvement</a></li>
>                 <li><a href="#">Blog</a></li>
>                 <li class="right"><a href="#">Contact Us</a></li>
>             </ul>
>         </div> <!-- End Nav -->

Мой Css выглядит следующим образом:

    #nav ul{
    width:980px;
    margin:0;
    padding:0;
    border:1px solid red;
}
#nav ul li{ float:left;color:#FFF}

#nav ul li a {display:block;padding:5px 62px 0 0px; text-decoration:none; color:#FFF}
#nav ul li.right{float:right;margin-right: -30px;
}

Проблема, с которой я столкнулся, заключается в том, что последний элемент будет выровнен по правому краю, но теперь между предпоследней вкладкой и последней вкладкой образовалось огромное пространство. Это из-за того, что у меня осталось заполнение в части li a. Я просто хочу, чтобы первый текст был выровнен по левому краю, а последний текст - по правому краю, а остальные между ними имели постоянное пространство. Вы можете увидеть проблему здесь: http://jsfiddle.net/nathan1342/sPZG9/

Любая помощь будет очень признательна !!

Спасибо!