I am having trouble trying to get a group of li tags to align how I want.

I have some basic html

<div class="menu">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>?

and some css

.menu
{
 border:solid 2px red;
 width:520px;
}

ul
{
border:solid 1px #e5e5e5;
height:40px;
margin:0 auto;
list-style:none;
width:500px;
}

li{

text-align:center;
display:inline;
margin:10px;

}

I dont want to hard code li widths for each of the elements but I would like for the li elements to take up all available space with the ul element.

What do I need to change to get the result I am looking for?

My attempt on jsfiddle