Por qué sobrepaso max-width?

[mblascog]

Buenas,
He creado una lista horizontal con 5 opciones.
Las 4 primeras a la izquierda, con un ancho del 14% cada una de ellas, esto supone 576 píxeles.
La última tiene un ancho del 46%, 452 píxeles, (100-(14*4)) y me salta a la siguiente linia porqué tengo asignado un max-width de 1024píxeles.
Lo que no entiendo es porque sobrepasa los 1024 píxeles si tengo asignado el box-sizing.
Agradeceré si alguien puede decirme donde está el error. Gracias.

La imagen de como queda es ésta:

El código cssl es el siguiente:

Código CSS:

#menu {
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    float:left;
    width:100%;
}
#menu nav 
    {font:bold 1.1em 'Arial';
    padding-top:2px;
    width:100%;
}
#menu nav ul {
    list-style-type:none;
    background:#367a7b;
}
#menu nav ul li#opcioActiva{
    background:#035A5B;
}
#menu nav ul li {
    float:left;
    height:40px;
    line-height:40px;
    background:#5CACAD;
    width:14%;
    text-align:center;
    margin-right:1px;
}
#menu nav ul li a{
    text-decoration:none;
    color:#FFF;
}
#menu nav ul li#bandera {
    width:44%;
    text-align:right;
    margin-right:2px;
    vertical-align:middle;
}
 

[pzin]

Pues box-sizing no se hereda, tienes que aplicárselo al elemento que necesites, o ya cambiar el modelo de caja de CSS para cualquier elemento:

Código CSS:

* {
  box-sizing:border-box;
}
 

Luego tienes por ahí un margen a la derecha.

Y por último 14 * 4 + 46 = 102.

[mblascog]

Gracias pzin,
He cambiado el box-sizing para cualquier elemento y no ha hecho nada.
En cuanto al comentario que me haces:
Y por último 14 * 4 + 46 = 102.
no entiendo a que te refieres

Las 4 primeras columnas: cada una es el 14% de 1024, en total el 56%
La última columna: es el 44% restante.

Gracias

[pzin]

Bueno, en el código está bien pero en la explicación pusiste que era 46% la última. De todas formas, ese margen a la derecha también se suma al 100%, por lo que lo está rebasando ¿no?