Suppression des espacement indésirables

Bonjour,

Voilà mon problème, je souhaiterais faire une page relativement simple mais propre avec un espacement horizontal d'exactement 20px entre chaque éléments (avec des margin de 20px) or il semble y avoir sans margin des espaces entre chaque éléments qui font que mes espaces ne seront pas d'exactement 20px. Tout étant calculé pour que la page tienne sur 960px.
Ne m'invitez pas à utiliser la grid system 960, je cherche aussi à comprendre comment résoudre le problème.

Pour illustrer mon problème voici un screenshot
http://img812.imageshack.us/img812/8594/iilc.png

Et mon CSS :

.logo{
display: inline-block;
width:260px;
height:150px;
background-color: blue;
vertical-align: top;
}

nav{
display: inline-block;
vertical-align: top;
}

nav ul{
list-style-type:none;
margin-top: 0;
position: absolute;
padding: 0px;
}

nav li{
width: 200px;
height: 100px;
position: relative;
display: inline-block;
background-color: red;
}

nav a{
text-decoration: none;
}