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;
}