{ text-align: justify; } on horizontal menu. Remove the added space on the right

{ text-align: justify; } on horizontal menu. Remove the added space on the
right


The top shows Firefox/IE. The bottom is Google Chrome. Notice the tiny
space on the right?
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>
ul {
padding: 0;
margin: 0;
width: 300px;
list-style-type: none;
text-align: justify;
background-color: #00f;
}
ul:after {
content: '';
display: inline-block;
width: 100%;
}
li {
display: inline-block;
}
a {
color: #fff;
}
http://jsfiddle.net/EtU9j/
Where is that tiny space coming from? Why doesn't it justify flush to the
edge?