爲什麼保證金頂部不適用於圖像替換徽標？

Question

我有標誌splited導航菜單：

<div id="header"> 
    <div id="header-container"> 

     <div class="left-nav"> 
      <ul> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">Portfolio</a></li> 
      <li><a href="#">Awards</a></li> 
     </ul> 
     </div> 

     <div class="logo"> 
     <h1>Magdi Designs</h1> 
     </div> 

     <div class="right-nav"> 
     <ul> 
      <li><a href="#">Testimonials</a></li> 
      <li><a href="#">About</a></li> 
      <li><a href="#">Contact</a></li> 
     </ul> 
    </div> 

    </div> 
</div> 

CSS

#header { 
    height: 60px; 
    margin-top: 30px; 
} 

#header-container { 
    width: 80%; 
    margin: auto; 
    position: relative; 
} 

#header li { 
    display: inline; 
    line-height: 60px; 
} 

#header .left-nav { 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

#header h1 { 
    background: url(logo.png) no-repeat; 
    width: 284px; 
    height: 30px; 
    margin-top: 15px; 
    text-align: center; 
    margin: auto; 
} 

#header .right-nav { 
    position: absolute; 
    top: 0; 
    right: 0; 
} 

的<h1>標識標籤似乎並不適用保證金頂部。
對不起，如果我把太多不相關的代碼，但我不知道是什麼原因造成的問題。
我也嘗試填充，但仍然無法正常工作。
的jsfiddle演示

次要問題：
這是一個很好的方式做分割菜單？

Answer 1

嘗試：

#header h1 { 
    margin: 15px auto 0; 
} 

代替：

#header h1 { 
    margin-top: 15px; 
    margin: auto; 
} 

Answer 2

你設置margin: automargin-top: 15px之後被去除所需的保證金。無論如何，margin: auto並不需要。