Ir probando, lo pude soluciónar..
En vez de "margin-left" hay que poner "margin-right" de este modo no habrá ningun espacio en el lado izquierdo... luego en el "<ul>" hay que poner un "margin-right" pero en negatio... de este modo todo queda alineado, y no ningun espacio esta fuera de lugar.. puedes añadir todos los recuadros que quieras, que no se perdera nada..
Lo unico que hay que procurar de hacer, es que el valor del margen <li> coincida con el valor del margen negativo de <ul>
No se si es una solución correcta... pero es una solución para aquel que le sirva..
Gracias a todos por la ayuda