Center responsive nav - html

Question

i'm trying to center my nav in a responsive design. When the viewport is stretched to about 900px, the 3 nav titles look off center to the rest of the content on the page. Does anyone of a way to fix this?
HTML:
<header>
<div id="logo">
<a href="#">
<img src="images/logo_55x73.png" alt="StudioMed" />
</a>
</div>
<nav>
<ul>
<li>Work</li>
<li>Profile</li>
<li>Journal</li>
</ul>
</nav>
</header>
CSS:
header {
background-color: #fff;
border-bottom: solid 1px #e4e4e4;
}
#logo {
padding: 2.3em 1.1em 1.7em 1.1em;
text-align: center;
}
nav {
display: block;
}
nav ul {
text-align: center;
}
nav li {
font-size: 0.95em;
display: inline;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 0 1%;
}
nav a {
text-decoration: none;
display: inline-block;
width: 122px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#media only screen and (min-width:767px) {
header {
float: left;
overflow: auto;
width: 100%;
}
#logo {
float: left;
width: 10%;
}
nav ul li {
float: left;
width: 22.1354166666667%;
margin-top: 50px;
font-size: 1em;
}
}
Thanks in advance

Answer 1

Your UL may have some default padding on its left.
Try adding this to your CSS:
nav ul {
...
padding: 0px;
}
http://jsfiddle.net/cxNZZ/
EDIT:
The padding issue above did not seem to solve your issue.Here is a different theory:
Each LI is the same width, but the text inside each LI may not be. That could cause the menu to appear to be off center, even though the LIs are centered.
http://jsfiddle.net/d6hRg/1/
http://jsfiddle.net/d6hRg/2/
See what I mean?