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

Question

This question already has answers here:

How do I justify a horizontal list? (10 answers)

Closed 7 years ago.

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?

Answer 1

It´s the whitespace between the last </li> and </ul>. It´s approximately 4px wide with normal fontsize.

this:

<ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li></ul>

or this:

<ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li><!--
--></ul>

will fix it.