Unordered list for menu isn't spacing out - html

Question

I have 5 menu items, that I'm having difficulty positioning in line with the background.
The menu text seems to bunch together in the middle, rather than listening to the "width" property to space them out in the correct places.
JSFIDDLE:
http://jsfiddle.net/nmHSD/
HTML:
<div id="menu">
<div class="table">
<ul>
<li>Home
</li>
<li>What we do</li>
<li>Our clients</li>
<li>Testimonials</li>
<li>Contact us</li>
</ul>
</div>
</div>
CSS:
#menu {
top:13px;
left:0px;
position:relative;
height:60px;
width:523px;
background-image:url('http://www.kitoit.com/new/img/menu-buttons.png');
}
.table {
display: table;
/* Allow the centering to work */
margin: 0 auto;
}
#menu ul {
width: 696px;
list-style: none;
padding-top: 20px;
}
#menu ul li {
display: inline;
}

Answer 1

You mean more like this? I changed somethings in your css..
I used float:left; on the <li> instead of inline and because you have 5 list-items i gave them a width:20%;.
Your new css: (less css but the outcome is what you want.)
#menu {
top:13px;
left:0px;
height:60px;
width:523px;
background-image:url('http://www.kitoit.com/new/img/menu-buttons.png');
}
#menu ul {
width:523px;
list-style: none;
padding-top: 30px;
padding-left:0;
}
#menu ul li {
float:left;
width: 20%;
text-align:center;
}
DEMO

Answer 2

i think following code can help for you:
replace code:
#menu ul {
list-style: none;
float: left;
padding: 20px 0 0 0;
}
and also
#menu ul li {
float: left;
width: 104px;
text-align: center;
}

Answer 3

You need to use display: inline-block; on <li> elements in order to be able to use the width, something like that like that:
#menu ul li {
display: inline-block;
width: 150px;
}