Margin verschiebt Container

[who]

Hallo
Ich habe folgendes Problem:
Mein Menü #mainnav hat ein Hintergrundbild (mainnav.png) das der Button darstellen soll. Wenn ich jetzt in den Container mit dem Hintergrundbild schreiben möchte, positioniert es den Text nicht in die Mitte. Deshalb verwende ich z.B. margin-top: 8px; um die Schrift 8 pixel von dem oberen Containerrand zu verschieben. Doch statt nur die Schrift zu verschieben, verschiebt es den ganzen #mainnav Container!
Hier das Bild:
http://img84.imageshack.us/img84/6207/mainnav.gif

Style.css:

  
body  
{  
margin: 0;  
padding: 8;  
font: 10pt "Comic Sans MS", "Times New Roman";  
text-align: center;  
color: #333;  
background-color: #FFFFFF;  
background-image: none;  
}  
#container  
{  
margin: 1em auto;  
width: 900px;  
text-align: left;  
background-color: #CCCCCC;  
border: 1px solid #000000;  
}  
#header  
{  
height: 170px;  
width: 900px;  
background-repeat: no-repeat;  
background-position: 0 0;  
position: relative;  
  
}  
#mainnav  
{  
	width: 900px;  
	height: 28px;  
	background-color: #CCCCCC;  
	background-image: url(images/mainnav.png);  
	color: #FFFFFF;  
	font-family: "Comic Sans MS", "Times New Roman";  
	font-size: 14px;  
	font-variant: small-caps;  
	text-decoration: none;  
	text-align: center;  
	margin-top: 8px;  

index.php

  
<div id="container">  
  <div align="justify">  
    <div id="header"> <img name="austausch" src="header1.gif" alt="austausch"></div>  
  </div>  
  <div id="mainnav">  
    <div align="left">sdag</div>  
  </div>  
	<div id="contents">  
	  <div align="center">  
	    <p><h1>Willkommen auf unserer Homepage</h1>  
	  
	  
  
    </div>  
  </div></div>