Responsive centering with fixed position

Question

I'm trying to center the navigation, but I haven't succeeded yet. The idea is that the navigation moves along as the user scrolls the page. It has to be responsive as well, because navigation should always be displayed. So I've come up with this:

<nav id="nav" class="container">
      <ul>
        <li><a href="#avaleht" class="avaleht" title="Avaleht" >avaleht</a></li>
        <li><a href="#massaazh" class="massaazh" title="Massaaž" >massaaž</a></li>
        <li><a href="#kontakt" class="kontakt" title="Kontakt" >kontakt</a></li>
      </ul>
</nav>

And the CSS:

#nav
{
    position: fixed;
}

#nav ul
{
    list-style: none;
    padding-left: 0;
    text-align: center;
}

#nav li
{
    display: inline-block;
}

#nav a
{
    color: rgb(255,255,255);
    font-family: 'Open Sans', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 1.3em;
    display: block;
    margin-right: 80px;
    height: 100px;
    width: 100px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    line-height: 100px;
}

#nav a.avaleht
{
    background: rgb(168,191,18);
}

#nav a.massaazh
{
    background: rgb(255,159,0);
}

#nav a.kontakt
{
    background: rgb(0,170,181);
}

#nav a:hover
{
    text-decoration: none;
    background: rgb(66,64,62);
}

And this is how I'd like it to work:

Thank you very much.

Answer 1

Just add left:0; right:0; to the fixed #nav element:

#nav {
    position: fixed;
    left:0; right:0;
}

Then remove the margin-right for the last li element's child anchor element:

#nav li:last-child a {
    margin-right:0;
}

Example Here

Answer 2

#nav {
    position: fixed;
    left:0; 
    right:0;
}

and replace margin-right:80 with margin:5px 40px

#nav a{
     margin: 5px 40px;
}