html - マージントップが画像置換ロゴで機能しないのはなぜですか?

Question

ロゴで分割されたナビゲーション メニューがあります。

 <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 デモ

二次的な質問:
これは分割メニューを実行する良い方法ですか?