Menu con li responsivo y justificado

[mostaza4]

Hola estoy creando una web responsive, y tengo un problema con el menu que no encontre solucion en el foro asique abro un nuevo tema.

Tengo un menu con elementos li simples

Código HTML:

<ul>
   <li>Elemento 1</li>
   <li>Elemento 2</li>
   <li>Elemento 3</li>
</ul> 

y su css

Código:

ul{
 width: 100%
 }
li{
  width:30%;
  display: inline-block;
}

Como veran en simple, a medida que se achica las celdas se achican, el problema es que como tengo margenes, y padings, no puedo poner 33% a el <li> y entonces lo que hace es dejarme del lado derecho ese 10% 8%. Como puedo hacer para que ese sobrante se distribuya entre las celdas? No encontre nada capas es re simple pero no pude dar con la respuesta. Gracias

[juangemelo01]

ya probaste que con la suma de los margenes, padings y anchos te sume el 100% (para eso, tambien tienes que hacer que los margenes y paddings esten en %)

[siddartha23]

*{box-sizing:border-box}

Agrégale esto a tu reset de css y ya no vas a tener que restar los padding ni bordes del width o height que le pongas a tus cajas...

[mostaza4]

eso de box

*{box-sizing:border-box}

no me sirvio, no funciona todo sigue igual y lo d eponer margenes con porcentaje no lo pense voy a probar

[siddartha23]

Iniciado por mostaza4

eso de box no me sirvio, no funciona todo sigue igual y lo d eponer margenes con porcentaje no lo pense voy a probar

Bueno lo del border-box es solo un inicio, solo sirve para resetear el modelo de caja y distribuir los objetos mas facilmente sin restarles nada cada vez que les agregas rellenos o bordes.

En tu ejemplo tienes 3 elementos li, cada uno con un tamaño que juntos ocupan 90% del contenedor, solo necesitarías darle un margin{0 5%} al li:nth-child(2) y quedarían perfectamente distribuidos............. aaaunque no va funcionar debido al display: inline-block que usas, esta propiedad deja 4px entre cada caja, mejor usa un float:left y todo va cuadrar