Bueno, lo primero sería cambiar la estructura HTML, no porque no se pueda hacer sin cambiarla, sino porque enlaces agrupados deberían de ponerse en una lista desordenada con
ul.
Después respecto al CSS, tienes que poner una estructura como si esos elementos fueran tablas con
display: table/table-row/table-cell. Y para que cada elemento de la lista tenga el mismo ancho, tienes que fijar la estructura de la tabla con
table-layout.
Código CSS:
Ver originalnav {
display: table;
width: 100%;
table-layout: fixed;
}
nav ul {
display: table-row;
}
nav li {
display: table-cell;
text-align: center;
}
Si adicionalmente quieres que los enlaces siempre ocupen todo el ancho dentro del elemento de la lista, entonces elimina el centrado de texto anterior quitando
text-align (más que nada porque no hace falta) y creas otra regla para los enlaces para que se visualicen como elementos de bloque: