links are leaving space

I was modifying my fixed bar on my site, and something occurred to me that I can not fix: I have 1 nav that inside has 1 ul that inside has 4 li if inside every li has a , what happens is that I'm leaving the following property for li s to occupy 25% of the size of nav (or ul , I'm not sure, but it's irrelevant since both have the same size and its padding s = 0), but when the rule is applied the last item in the list does not fit on the same line and jumps to another, which I do not want to happen. Here is the relevant code:

            <nav id="menu">
            <ul>
                <li class="active"><a href="index.html">HOME</a></li>
                <li><a href="servicos.html">SERVIÇOS</a></li>
                <li><a href="fotos.html">FOTOS</a></li>
                <li><a href="contato.html">CONTATO</a></li>
            </ul>
        </nav>

        /*CSS em arquivo separado*/

* {box-sizing:border-box;}

nav#menu {
position        : fixed;
top             : 0;
width           : 320px;
left            : 0;
z-index         : 10;

}

nav#menu ul {
padding         : 0;
z-index         : 10;
background-color: #DCDCDC;
list-style      : none;
margin          : 0;
left            : 0;
right           : 0;
}

nav#menu ul li {
background-color:#DCDCDC;   
display            : inline-block;
width: 25%;
padding            : 4px;
font-family        : 'Titillium Web';
font-size          : 10pt;
text-align         : center;
}

nav#menu ul li.active {
background-color: #ffffff;
border-bottom   : solid 2px rgb(200,20,20);
background-image: none;
color           : rgb(200,20,20);
}

nav#menu ul li a {
    text-decoration: none;
    color          : #393939;
    word-spacing   : 0;
}

What I've noticed is that if you click and drag the mouse as if you were selecting a text in addition to selecting the content within a , whitespace between li s is also selected.