問題與水平居中導航在UL

Question

似乎列表項目被困在UL的左側，無論我做了什麼大小。它看起來集中在一些屏幕上，但不在較大的屏幕上。浮動：右是我的屏幕尺寸的唯一工作，但它不保持居中，如果你調整窗口的大小。

網站：http://www.lotusroomofboca.com/

HTML：

<div id="header"> 
<img id="logo" src="images/logo.png" alt="Lotus Room logo"> 
<ul id="nav"> 
<li><a href="index.html">Home</a></li> 
<li><a href="our_tea.html">Our Tea</a></li> 
<li><a href="menu.html">Menu</a></li> 
<li><a href="learn_more.html">Learn More</a></li> 
<li><a href="contact.html">Contact</a></li> 
</ul> 
</div> 

CSS：

#header {position:fixed; 
    width:100%; 
    background-color:rgba(244,243,243,1); 
    z-index:100; 
    -webkit-box-shadow: 0px 10px 60px 0px rgba(219,219,216,0.94); 
    -moz-box-shadow: 0px 10px 60px 0px rgba(219,219,216,0.94); 
    box-shadow: 0px 10px 60px 0px rgba(219,219,216,0.94); 
    }  

#nav {list-style:none; 
     margin:auto; 
     text-align:center; 
     width:960px; 
     padding-top:30px; 
     padding-bottom:20px; 
     float:right;} 

#nav a {text-decoration:none; 
     text-align:center; 
     display:block; 
     color:#5c5c5c; 
     font-family:'Avenir'; 
     font-size:12px; 
     border-right:thin grey solid; 
     float:left; 
     width:10%; 
     } 

#nav li:last-child a {border-right:none;}  

#nav a:hover {color:#7b8c6f; 
       transition:ease 0.5s;} 

Answer 1

這裏有一個FIDDLE

使用此配置爲<ul>

<ul id="nav"> 
    <li><a href="index.html">Home</a> 
    </li><li><a href="our_tea.html">Our Tea</a> 
    </li><li><a href="menu.html">Menu</a> 
    </li><li><a href="learn_more.html">Learn More</a> 
    </li><li><a href="contact.html">Contact</a> 
    </li> 
</ul> 

---

和這個CSS

#nav li { 
    text-align:center; 
    display:inline-block; 
    color:#5c5c5c; 
    font-family:'Avenir'; 
    font-size:12px; 
    border-right:thin grey solid; 
    width:10%; 
} 
#nav li:last-child { 
    border-right: none; 
} 
#nav li a { 
    text-decoration: none; 
    color: #000; 
    transition: color 0.5s ease; 
    -moz-transition: color 0.5s ease; 
    -webkit-transition: color 0.5s ease; 
} 
#nav li a:hover { 
    color:#7b8c6f; 
} 

Answer 2

第一次嘗試加入

#nav a { 
    margin: 0 auto; 
} 


#nav a { 
    display: inline-block; //instead of block 
    float: left; //remove this too 
}