HTML - Problema con Responsive Design

Hola a todos! Les comento que estoy aprendiendo Responsive Design y realmente me gusta mucho, pero me surgió un problema mientras estuve haciendo mi pagina.
El menu es fixed. Cuando achico la pantalla (como se muestra en la imagen 2) CONTACTO baja, no se porque, si no no especifiqué en el media query nada (SOLO ESTO: <link rel="stylesheet" type="text/css" href="moviles/moviles.css" media="screen and (min-width:0px) and (max-width:480px)"/>
). Yo quisiera que CONTACTO no se baje sino que siga al lado de los demas pero los li se achiquen. veo que esto se da por default, pero no se porque se me baja el CONTACTO. Gracias!

Veo muy poco código, pero los <li> del <nav> esta flotando, por eso cuando no cabe, se cae a la linea de abajo.

Con esta regla:


Estás dictando una regla de 0px hasta 480px. Imagino contacto se "baja" porque no cabe en la pantalla ,
debiendo hacerse espacio, en este caso hacia abajo.

En resumen tienes un nav con un 75% de ancho, y cada item dentro de él es de 17% (17% x 5 = 85%).
Como ves es difícil que caiga. La solución es incrementar el ancho del nav o usar otra medida como rem, ch o em.

Saludos!

Hola Lopez; ahora quiero que los LI abarque todo el UL contenedor, y no que quede ese pequeño espacio que esta redondeado en bordó al lado de CONTACTO, pero quiero que mantenga sus margenes. Intente como me dijiste pero no pude, intente colocandole un BOX-SIZING :BORDER-BOX, y tampoco. Intenté modificando los valores para ajustarlo, pero si me paso con los valores, CONTACTO se baja, si no me paso, queda ese margen en CONTACTO. Como puedo hacerlo? Gracias!

Diego,

Quizás algo así te ponga en camino:


Saludos!