Nav Not evenly spacing when using Table - html

Question

I was playing around with the display:table/display:table-cell for nav menus and I've run into a problem. Essentially I am wanting each of the items to be spaced evenly across the given length of the UL.
I'm not sure what I'm missing but it seems to be giving the majority of the space to the first list element.
What am I missing?
HTML:
<div id="container">
<div id="fixedWidth">
<div id="logoAndLinks">
<div id="tapMatesLogo">
<p>Tapemates.</p>
</div>
<ul>
<li>Work</li>
<li>Story</li>
<li>Contact</li>
<li>Blog</li>
</ul>
</div><!-- logo and links -->
</div>
</div><!--end container -->
CSS:
*
{
margin: 0;
padding: 0;
}
#container
{
height: 1100px;
width: 100%;
display: block;
background: white;
border: 1px solid black;
}
#fixedWidth
{
height: 1100px;
width: 1100px;
display: block;
margin-top: 103px;
margin-left: auto;
margin-right: auto;
border: 1px solid #ccc;
}
#logoAndLinks
{
border: 1px solid black;
display: block;
width: 1060px;
height: 60px;
margin-left: 20px;
}
#tapMatesLogo
{
display: block;
float: left;
height: 56px;
width: 220px;
line-height:58px;
//border: 1px solid #ccc;
}
#tapMatesLogo p
{
color: #7933AE;
font-family: CenturyGothic, AppleGothic, sans-serif;
font-size: 43px;
}
ul
{
display: table;
//float: right;
list-style: none;
height: 32px;
width: 357px;
border: 1px solid black;
}
ul li
{
border: 1px solid black;
//float: left;
display: table-cell;
//padding-right:30px;
width: 100%;
font-size: 22px;
line-height: 30px;
font-family: CenturyGothic, AppleGothic, sans-serif;
}

Answer 1

Give the width of li 25%
*
{
margin: 0;
padding: 0;
}
#container
{
height: 1100px;
width: 100%;
display: block;
background: white;
border: 1px solid black;
}
#fixedWidth
{
height: 1100px;
width: 1100px;
display: block;
margin-top: 103px;
margin-left: auto;
margin-right: auto;
border: 1px solid #ccc;
}
#logoAndLinks
{
border: 1px solid black;
display: block;
width: 1060px;
height: 60px;
margin-left: 20px;
}
#tapMatesLogo
{
display: block;
float: left;
height: 56px;
width: 220px;
line-height:58px;
//border: 1px solid #ccc;
}
#tapMatesLogo p
{
color: #7933AE;
font-family: CenturyGothic, AppleGothic, sans-serif;
font-size: 43px;
}
ul
{
display: table;
//float: right;
list-style: none;
height: 32px;
width: 357px;
border: 1px solid black;
}
ul li
{
border: 1px solid black;
//float: left;
display: table-cell;
//padding-right:30px;
width: 25%;
font-size: 22px;
line-height: 30px;
font-family: CenturyGothic, AppleGothic, sans-serif;
}
<div id="container">
<div id="fixedWidth">
<div id="logoAndLinks">
<div id="tapMatesLogo">
<p>Tapemates.</p>
</div>
<ul>
<li>Work</li>
<li>Story</li>
<li>Contact</li>
<li>Blog</li>
</ul>
</div><!-- logo and links -->
</div>
</div><!--end container -->

Answer 2

Try adding table-layout: fixed to the ul element
https://jsfiddle.net/2ewov2qu/