Need help with my navigational bar code

I was hoping someone could help me out with this. How do I neatly center the words in the bars that I created? It looks words dont look clean cut or centered the way that I have it now. The following is the code that I came up with:


#mainnav {
margin: 0;
padding: 0;
list-style:none;
padding: 11.5px;
}
#mainnav li{
float: left;
width: 11.5em;
}
#mainnav a {
color: #000;
font-size: 12px;
text-transform: uppercase;
text-decoration: none;
border-left: none;
border: 1px solid #999;
padding: 7px 5px;
display: block;
background-color: #e7e7e7;
}
#mainnav a:hover {
font-weight: bold;
background-color: #B2F511;
}
#home #homelink,
#menu #menulink,
#faqs #faqslink,
#contact #contactlink {
background-color: #B2F511;
padding-right: 15px;
padding-left: 30px;
font-weight: bold;
}

<ul id="mainnav">
<li><a href="/index.html" id="homelink">Home</a></li>
<li><a href="/menu.html" id="menulink">What's on the Menu</a></li>
<li><a href="/faqs.html" id="faqslink">F.A.Q's</a></li>
<li><a href="/contact.html" id="contactlink">Contact Us</a></li>
</ul>

I would greatly appreciate any help. Thank you

 

To center the text within each <li> add the bolded line below:

#mainnav li{
float: left;
width: 11.5em;
text-align:center;
}