Ciao a tutti ragazzi, e buon venerdì innanzitutto!

Sto cominciando a carpire i segreti del CSS seguendo l'ottimo tutorial di HTM.IT. Stavo quindi provando a giochicchiare con i box, quando mi sono imbattuto in un piccolo problema.

Ho provato a fare un box di grandezza (percentuale) pari alla metà della pagina e posto centrato nella pagina stessa.E fin qui tutto bene. Poi ho provato ad aumentare la larghezza del box al 75% della pagina, diminuendo così i margini dx e sx al 12,5%.
Il risultato non è però quello che mi aspettavo, il box viene posizionato in alto a destra. QUal è il porblema?
Grazie mille,

Di sotto il codice

codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>

<style type="text/css">

html {
  height: auto;
  width: auto;
  background-color: #9BD394;
      }
div {
  margin: 25% 12,5% 25% 12,5%;/*margin: top, right, bottom, left*/
  padding: 0% 0% 0% 0%;
  border-right: 0px;
  border-top: 0px;
  border-bottom: 0px;
  border-left: 0px;
  width: 75%;
  height: 50%;
  background-color: #FFFFFF;
}

</style>
</head>

<body>
<div id="div.main">


prova</p>
<ul>[*]1[*]2[*]3[/list]
</div>
</body>
</html>