Nel .css il BOX è una class ("."), mentre nel .html è un id ("#").

Scusa la domanda, però: le basi li sai del html e del .css?

codice:
.box { width: 70%; margin:auto; }
Perché non fai UN contenuto principale per TUTTO il contenuto:

codice:
<style>
body{background:f00; font-family: arial, helvetica, sans-serif;} //nel html non mettere codice .css !
.wrapper{  width: 960px; margin: 0px auto;} //MANCA
#header{width:960px; height:300px;} //MANCA
#box{float:left; width: quello che vuoi; height: quello che vuoi} //MANCA
#menu{stile per menu}

ecc...
</style>
Per organizzare il contenuto di una pagina html ci sono i contenitori, ai quali devi dare lo stile quello che vuoi.
Dal tuo codice manca tutto questo.
Ma, non posso scriverti tutto il layout della pagina.

Suggerisco di farti prima sulla carta tutta la pagina (uno schizzo del layout che vuoi ottenere) e poi lo butti giù.
Cosi hai un filo.



EDIT:

Per capire con precisione com'è fatta la pagina alla quale punti con il link, vai sopra con il mouse con i tasto destro e poi---> ispeziona elemento (con chrome)

Mentre con firefox ti puoi installare FIREBUG (cerca su google) e segui lo stesso procediamento.