Problema con menú de navegación

Hola amigos estoy haciendo una web y justo estoy creando la barra de navegación y pero no me esta saliendo bien yo recien soy nuevo en html5 y css3 lo que sucede es que esta barra los <li> estan separados por un margen y lo que quiero es que esten unidos sin separacion y otro problema que el hover no realiza el cambio de color del texto y tambien si podrian ayudarme a mejorar mi codigo que les enviare a continuación.

CODIGO HTML5

<nav id="barra">
<ul>
<li><a href="#">INICIO</a></li>
<li><a href="#">NOSOTROS</a></li>
<li><a href="#">SERVICIOS</a></li>
<li><a href="#">LA FLOTA</a></li>
<li><a href="#">CONTACTO</a></li>
</ul>
</nav>

CODIGO CSS3

#barra {
height:50px;
background:#D7D9DF;
padding:0px 20px;
box-sizing:border-box;
}
#barra ul {
float:none;
width:100%;
height:50px;
background:yellow;
margin:0px;
padding:15px 0px;
box-sizing:border-box;
}

#barra ul li {

display:inline;
}

#barra ul li a {
width:20%;
height:50px;
font-size:19px;
font-family:Arial;
color:#0E446D;
text-decoration:none;
text-align:left;
margin-right:0;
padding:15px 10px;
background:red;
box-sizing:border-box;
}
#barra ul li a:hover {
color:blue;
background-color:white;
}

Hola checa si te funciona esto en el css3 li en ves de inline
ponle inline-block o bien margin 0px
Lo del hover revisa poniendo el color en hexadecimal o intenta cambiar el hover en la etiqueta li y a
Si gustas pasar a [url=blog.webcolor.mx]blog.webcolor.mx [/url]y publicaré un post sobre eso

3 cosas:

1. Como te dijeron mas arriba, en el css colocale display:inline-block a "#barra ul li".
2. No cierres los <li> y vas a eliminar los espacios en blanco. Solamente borra todos los cierres de item (</li>)
3. El hover funciona bien, cambie el color para probar y no hubo problemas.

Te dejo el final:

http://codepen.io/anon/pen/Pwgxgy

Saludos