1. tienes un problema... matemático. A cada li le das una anchura del 20%, pero tienes solo 4 li, por lo que 20*4 = 80% y te falta un 20% del ul por cubrir. O agregas un 5° li o haces que los li midan 100/4 = 25%
También tienes que sacarle el padding a los li porque en el modelo de cajas normal el ancho total es la suma del width + padding + border + margin. Si le das un width de 25% pero a su vez le sumas 14px de padding, el resultado total va a ser + del 100%. Una alternativa a eso es usar
box-sizing:border-box
Como estas usando display inline-table (y sucede lo mismo con inline-block) hay un pequeño problema cuando le das un ancho tan justo y se te va a ir uno de los li para abajo a causa de que se generan unos pequeños márgenes "fantasma" causados por espacios y saltos de línea en tu código fuente. No estoy seguro si este problema se debe a una mala redacción de la especificación técnica de css, a un bug de los navegadores o si es una de esas áreas "grises" donde no está especificado como hacer y cada navegador hace como quiere. Para solucionar esto tienes varias opciones:
- Eliminar todo espacio y salto de línea en la zona afectada, dejando el código todo en una línea de la siguiente forma: <ul><li></li></li>...
- No usar display inline-table y en cambio flotar los li con float:left para que te queden todos uno al lado del otro
- Darle al ul un font-size de 0 (si) y al li el font-size que corresponda
2. usa margin, reduciendo proporcionalmente el width para que cada li no te sume más del 25% de ancho total
3. elimina el overflow:hidden del nav