ヘッダーDIVを分割してNav内の行を使用できるようにする

Question

現在、ヘッダーdivを使用していますが、divの下にあるメニューでは、メニューをロゴと同じdivエリアに移動する必要があります。ロゴ自体は、少し下よりもむしろ。

私はヘッダーをすべてまとめてやり直す必要があると思っていますが、これは私が現在持っているものを編集できるかどうか疑問に思っています。私は手動でWordPressメニューのPHP呼び出しを使用するのではなく、簡単に（HTMLコードリンクを使用して）メニューをコーディングしても構いません。

ウェブサイト：http://outside.hobhob.uk/test/

コード私が編集しています：

<header id="header" role="banner"> 
    <div class="headwidth"> 
     <h1 class="logo"> 
      <?php 
       if (!empty($data['iter_normal_site_logo'])) { 
      ?> 
        <a href="<?php echo home_url(); ?>"><img src="<?php echo   $data['iter_normal_site_logo']; ?>"></a> 
      <?php 
       } else { 
       ?> 
        <a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a> 
       <?php 
       } 
      ?> 
     </h1> 
     <nav id="main-nav"> 
     <?php wp_nav_menu(array('theme_location' =>'main-nav','fallback_cb'=>'default_main_nav','container'=>'wda','depth'=>2,'menu_class'=>'sf-menu')); ?> 
    </nav> 
    </div> 
</header> 

CSS：

#header { 
    position: relative; 
    left: 0; 
    z-index: 10000; 
    width: 100%; 
    z-index: 9; 
    padding-top: 50px; 
    background-color: #fff; 
    -moz-box-shadow: 0 0 20px #aaa; 
    -webkit-box-shadow: 0 0 20px #aaa; 
    box-shadow: 0 0 20px #aaa; 
    -webkit-transition: all 1s; 
    -moz-transition: all 1s; 
    -o-transition: all 1s; 
    -ms-transition: all 1s; 
    transition: all 1s; 
} 
.headwidth { 
    max-width: 1000px; 
    width: 100%; 
    position: relative; 
    margin: 0 auto; 
} 
.logo { 
    color: #29251F; 
    font-size: 84px; 
    line-height: 1.1; 
    word-wrap: break-word; 
    font-weight: 800; 
    text-transform: uppercase; 
    margin: 0; 
    text-align:left; 
} 
.logo a { 
    margin:0 auto; 
} 

と：

#main-nav { 
    padding: 20px 0 0; 
} 

おかげでロード！ :)

Answer 1

ボトムのメニューでアブソリュートを使うのはどうですか？

#main-nav { 
text-align: right; 
position: absolute; 
bottom: 29px; 
right: 0px; 
} 

上記のコードは、メインナビゲーションを自由に移動できます。