내 탐색 모음에서 고르게 펼쳐진 요소가 페이지 가장자리에 닿지 않도록하려면 어떻게해야합니까?

현재 페이지 너비에 걸쳐 요소를 균등하게 분산하는 크기 조정 가능한 탐색 모음이 있습니다. 탐색의 오른쪽 더 많은 요소는 페이지의 끝 부분에 매우 가깝고 가장 왼쪽 요소는 좋은 여백을 가지고 있습니다. 맨 오른쪽 요소가 오른쪽에서 여백을 갖도록하려면 어떻게해야하나요? 맨 왼쪽 요소가 왼쪽에서 여백을 갖는 것과 같은 방법은 무엇입니까?

http://jsfiddle.net/td5rt3or/1/

HTML

<ul id="nav">
        <li><a href="#">HOME</a></li>
        <li><a href="#">ABOUT</a></li>
        <li><a href="#">BASIC SERVICES</a></li>
        <li><a href="#">OUR STAFF</a></li>
        <li><a href="#">CONTACT US</a></li>
</ul>

CSS

#nav {
text-align: justify;
min-width: 500px;
}
#nav:after {
content: '';
display: inline-block;
width: 100%;
}

#nav li {
margin-top: 2%;
display: inline-block;
}