margin-top не работает

HTML:

1.  
2. <div id="header">
3.         <div id="header_bg">
4.             <div class="logo"><a href="index.php">Главная</a></div>
5.             <div class="phone"></div>
6.       </div><!--END header_bg-->
7.     </div>
8.  

[css]
#header {
background:url(img/header_bg.jpg) repeat-x;
height:162px;
}

#header_bg {
background:url(img/header.jpg) no-repeat;
height:162px;
margin: 0 auto;
width:1000px;
}
.logo {
width:320px;
height:72px;
background:url(img/logo.png) no-repeat;
padding:90px 0px 0px 180px;;
color:#fff;
font-size:14px;
font-weight:bold;
font-family:Verdana;
border:1px solid black;
float:left;
}

.phone {
margin-left:580px;
margin-top:20px;
height:85px;
background:url(img/phone.png) no-repeat;
}
[/css]
Нужно <div class="phone"></div> опустить вниз на 20 px, прописываю
[css]margin-top:20px;[/css] он мне опускает весь <div id="header">

 

Спасибо, все получилось