CSS - DUDA con widths

Buenas, tengo dudas respecto a los anchos de los diferentes divs que uno se define en las css
Si alguien me puede aclarar la duda, le agradezco.
En el siguiente ej no entiendo por que si el div "wrapper" tiene width:720
y contiene a dos divs con width: 180( mainNav ) y width: 520( content ) y el total sumado seria de 700px y no 720px

lo mismo para content tiene width: 520 y
contiene mainContent con width:320 y secondaryContent con width: 180 y el total sumado seria 500px y no 520px

_________________________________

html:
------

<div id="wrapper">
......

<div id="mainNav">
......
</div>

<div id="content ">
<div id="mainContent ">
.......
</div>
<div id="secondaryContent ">
.......
</div>
</div>
</div>
....
_________________________________________

______________________________________________

CSS:
--------
#wrapper {
width: 720px;
margin: 0 auto;
text-align: left;
}

#mainNav {
width: 180px;
float: left;
}

#content {
width: 520px;
float: right;
}

#mainContent {
width: 320px;
margin: 0;
float: left;
}

#secondaryContent {
width: 180px;
float: right;
}

#mainNav *, #secondaryContent * {
padding-left: 20px;
padding-right: 20px;
}

_________________________________________

Les agradezco si me pueden ayudar a aclarar esta duda, ya que no entiendo lo que esta ocurriendo.
Al principio habia pensado que era por el padding a lo ultimo del css, pero eso aplica SOLO a lo que
esta adentro de #mainNav y de #secondaryContent, por lo que ya estaria incluido en su ancho.

Muchas gracias,
Leandro.-

je, a veces se deja adrede, un espacio vacio , que varia alrededor de 20 px, en la suma de los anchos, para que no se monten y queden uno arriba del otro en vez de uno al lado del otro, entonces este espacio funciona como medida de seguridad ademas de separador visual, los distintos navegadores interpretan de manera diferente las css, sobre todo en el explorer, que se ve tan loco todo que tenes que resetear los interpretacion de la css en el xplorer, y de paso en todos, para que comienzen de cero y hacerlo verdaderamente estandar

este es el pedazo de codigo que se usa para resetear, va al principio

* {
padding: 0;
margin: 0;
z-index: 1;
}