以固定位置为中心的响应中心

Question

我正试图将导航作为中心，但我还没有成功。这个想法是当用户滚动页面时导航移动。它也必须具有响应性，因为应始终显示导航。所以我想出了这个：

<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>

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);
}

这就是我喜欢它的方式：

非常感谢。

Answer 1

只需将left:0; right:0;添加到已修复的#nav元素：

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

然后删除最后margin-right元素的子锚元素的li：

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

Example Here

Answer 2

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

并替换保证金权利：80保证金：5px 40px

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