Salve a tutti.. sto cercando di risolvere questo problema da alcune ore.. sono sicuro trattarsi di una sciocchezza, ma proprio non riesco a capire dove sbaglio.

Sto cercando di creare una pagina con una griglia dinamica, impostando le grandezze in unità percentuali e relative, ma non mi riesce proprio di ottenere l'effetto desiderato.. i vari "pezzi" della mia pagina rimangono separati, nonostante abbia impostato a 0 il padding:

questo il codice della pagina di prova:
codice:
<!doctype html> 
<html>
 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <meta name="keywords" content="trunko, web, webmaster, web agency, web design,    creazione siti internet" /> 
    <meta name="description" content="trunko, soluzioni web per privati ed imprese." /> 
        <title>trunko, soluzioni web per privati ed imprese.</title> 
    <link rel="stylesheet" media="screen" type="text/css" href="css/stile.css" /> 
</head> 

<body>  

  <div id="container">
     <header> </header> 
     <nav> </nav> 
     <section id="corpo"> </section>  
     <footer> </footer> 
  </div> 
</body> 

</html>
mentre questo è il relativo foglio di stile:

codice:
@charset "utf-8"; /* CSS Document */ 

body{ font-size: 1em; } 

#container{ 
     max-width: 105.000em; 
     height: 75.000em;
     margin: 0 auto; 
} 

header{ 
     background-image:url(../images/header_bg.png);
     background-size:contain;
     background-repeat:no-repeat;
     height: 16.25%;
     width: 100%;
     padding:0px 0px 0px 0px; 
}

#corpo{ 
    background-image:url(../images/corpo_bg.png);
    background-size:contain;
    background-repeat:no-repeat; 
    height: 59.166666666666666666666666666667%;
    width: 100%;
    padding:0px 0px 0px 0px;
} 

nav{
    background-image:url(../images/nav_bg.png);
    background-size:contain;
    background-repeat:no-repeat;
    height: 12.916666666666666666666666666667%;
    width: 100%;
    padding:0px 0px 0px 0px; 
} 

footer{
    background-image:url(../images/footer_bg.png);
    background-size:contain;
    background-repeat:no-repeat;
    height: 11.666666666666666666666666666667%;
    width: 100%;
    padding:0px 0px; }
il risultato sperato sarebbe questo:
http://i48.tinypic.com/2akn2c8.jpg

invece il risultato che ottengo è il seguente:
http://trunko.altervista.org/index.html

potete aiutarmi? grazie mille