Centre the links in a navigation bar - css

Question

How do you centre the links themselves in the navigation bar?
The border is fluid and the nav buttons rearrange themselves to different screen sizes but I just can't get them to be in the middle, instead they are always on the left.
My HTML:
<div id="centerment">
<div id="navigation">
<div id="menu4">
<ul>
<li> <span class="title"><strong>HOME</strong></span> </li>
<li> <span class="title"><strong>ABOUT</strong></span></li>
<li> <span class="title"><strong>WOOD</strong></span> </li>
<li> <span class="title"><strong>CONTACT</strong></span></li>
</ul>
</div>
My CSS:
In all 3 responsive size: (mobile, tablet and desktop).
#centerment {
position:relative;
clear: both;
float: left;
margin-left: 0px;
margin-right: 0px;
width: 100%;
display: block;
}
#menu4 ul {
list-style: none;
font-family: "corbert regular regular";
font-size: 10px;
letter-spacing: 2px;
line-height: 1.2em;
float: left;
clear: left;
border-bottom: 1px solid #000;
border-top: 1px solid #000;
}
#menu4 ul li{
float: left;
}
#menu4 ul li a{
display: inherit;
text-decoration: none;
color: #000000;
text-align: center;
margin-left: 0 auto;
margin-right: 0 auto;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
width: 170px
}
#menu4 ul li a span{
display:inherit;
}
#menu4 ul li a span.title{
}
#menu4 ul li a:hover span.title{
color: #000000;
}
#menu4 ul li a span.text{
padding: 0px 5px;
font-family: "corbert regular regular";
font-size: 13px;
font-style: normal;
font-weight: 300;
letter-spacing: normal;
line-height: 1.6em;
color: #000000;
visibility: hidden;
}
#menu4 ul li a:hover span.text{
visibility:visible;
}
.gridContainer.clearfix #navigation #menu4 ul li a .title {
font-family: Corbert;
}
Many many thanks in advance!

Answer 1

set containing element to text-align: center; then set the li's to display: inline-block; if there are no floats on the a tags this should do it.

Answer 2

Get rid of borders on #menu4 ul, give it a margin of -1px auto;, add this:
#menuBox {
margin: 0 auto;
width: 53.2em;
height: 30px;
border-bottom: 1px solid #000;
border-top: 1px solid #000;
}
To contain the ul.
I originally posted the wrong link here is the correct one: jsFiddle

Answer 3

You can lose the ul and just use spans. Change your HTML to this:
<div id="centerment">
<div id="navigation">
<div id="menu4">
<div class="outer">
<span class="inner"><span class="title"><strong>HOME</strong></span> </span>
<span class="inner"><span class="title"><strong>ABOUT</strong> </span></span>
<span class="inner"><span class="title"><strong>WOOD</strong></span> </span>
<span class="inner"><span class="title"><strong>CONTACT</strong> </span></span>
<span class="finish"></span>
</div></div></div></div>
Make sure to keep the "finish" span at the bottom of your list. That spaces all the links correctly.
Then add this to your CSS:
.outer {text-align: justify; width:70%; margin:0px auto; border-top:1px solid; border-bottom:1px solid;}
.outer span.finish {display: inline-block; width: 100%}
.outer span.inner {display: inline-block; white-space: nowrap}
Then change #menu4 ul to #menu4 .inner with this CSS:
#menu4 .inner {list-style: none; font-family: "corbert regular regular"; font-size: 10px; letter-spacing: 2px; line-height: 1.2em;
}
and change the "#menu4 ul li a" to say "#menu4 a"
That should do it. You can change the width % of .outer to play with the width of the nav as a whole.