issue with centering nav horizontally in UL - html

Question

It seems the list items are stuck on the left side of the UL no matter what size I make it. It looks centered on some screens but not on larger ones. Float:right has been the only thing that works for my screen size, but it doesn't stay centered if you resize the window.
Site: http://www.lotusroomofboca.com/
HTML:
<div id="header">
<img id="logo" src="images/logo.png" alt="Lotus Room logo">
<ul id="nav">
<li>Home</li>
<li>Our Tea</li>
<li>Menu</li>
<li>Learn More</li>
<li>Contact</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

Here's a FIDDLE
Use this config for <ul>
<ul id="nav">
<li>Home
</li><li>Our Tea
</li><li>Menu
</li><li>Learn More
</li><li>Contact
</li>
</ul>
and this 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

first try adding
#nav a {
margin: 0 auto;
}
#nav a {
display: inline-block; //instead of block
float: left; //remove this too
}