Centering left-floated elements within horizontal navbar? - html

Question

So I've got this navbar, which you can see here--
http://codepen.io/anon/pen/FJGvg/
I'm trying to evenly space the elements within the navbar, and I cannot get it to work for the life of me. I have tried many things. Here is the code:
<ul id="menu">
<li><a>Test</a></li>
<li><a>Test Different Length </a></li>
<li><a>Test Again</a></li>
<li><a>Test23</a></li>
</ul>
#menu {
width: 50%;
min-width: 700px;
margin: auto;
margin-top: 10px;
padding: 10px 0 0 0;
list-style: none;
text-align: center;
background-color: #111;
background-image: linear-gradient(#444, #111);
border-radius: 18px;
/* box-shadow: 0 2px 1px #9c9c9c;*/
}
#menu li {
display: inline;
margin-left: auto;
width: 25%;
float: left;
padding: 0 0 10px 0;
position: relative;
}
#menu a {
float: left;
height: 25px;
padding: 0 25px;
color: #999;
text-transform: uppercase;
font: bold 12px/25px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#menu li:hover > a {
color: #fafafa;
}
/* Clear floated elements */
#menu:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}

Answer 1

#menu {
width: 50%;
min-width: 700px;
margin: 10px auto 0 auto;
padding: 5px 0;
list-style: none;
text-align: center;
background-color: #111;
background-image: linear-gradient(#444, #111);
border-radius: 18px;
/* box-shadow: 0 2px 1px #9c9c9c;*/
}
#menu li {
display: inline-block;
width: 23%;
position: relative;
padding:0;
}
#menu a {
height: 25px;
color: #999;
text-transform: uppercase;
font: bold 12px/25px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#menu li:hover > a {
color: #fafafa;
}
/* Clear floated elements */
#menu:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}