波旁整齊水平對齊的div

Question

我有在全尺寸的佈局3層的元件（12列網格）的報頭：

左=標誌（3列），中間= NAV（6列），右=社交媒體（3列）

在較小的尺寸（4列網格）我設置「社交媒體」顯示沒有，「標誌」和「導航」都是兩列。它們不是水平對齊的，第二個元素顯示在跨越兩列的第一個下方，但不是彼此相鄰。我嘗試過漂浮，清除和所有爵士樂，但沒有歡樂。

下面是HTML：

<header> 

<div class="header"> 

    <a href="<!-- @path index.html/#page1 -->" id="logo">∆0Ω</a> 

    <nav> 
     <ul> 
      <li class="nav-item"> <a href="<!-- @path index.html/#page1 -->">What?</a></li> 
      <li class="nav-item"> <a href="<!-- @path // -->">How?</a></li> 
      <li class="nav-item"> <a href="<!-- @path // -->">Work</a></li> 
      <li class="nav-item"> <a href="<!-- @path // -->">Few!</a></li> 
      <li class="nav-item hide"> <a href="//">Twitter</a></li> 
      <li class="nav-item hide"> <a href="//">Facebook</a></li> 
      <li class="nav-item hide"> <a href="//">LinkedIn</a></li> 
     </ul> 
    </nav> 

    <div id="social"> 
     <ul> 
      <li><a href="http://">t</a></li> 
      <li><a href="http://">f</a></li> 
      <li><a href="http://">in</a></li> 
     </ul> 
    </div> 


</header> 

這裏是SCSS：

header{ 


    background: tint(black, 70%); 
    position: relative; 
    width: 100%; 
    top: 0; 
    z-index:+100; 


    @include large { 
     position: fixed; 
     height: 6.666666666666667%; 
    } 

} 


.header { 

     top: 0; 
     height: 100%; 
     @include outer-container; 
     background: tint(black, 85%); 
     text-align: center; 
     z-index: +100; 

    } 


#logo { 
    text-align: left; 
    @include span-columns(2); 

     @include large { 
      @include span-columns(3); 
      } 

} 

nav { 
    @include span-columns(2); 
    text-align: right; 

     @include large { 
      @include span-columns(6); 
      text-align: center; 

        li { 
         display: inline-block; 
        } 

        .hide{ 
         display: none; 
        } 
      } 
} 


#social { 

    display:none; 

    @include large { 
     @include span-columns(3); 
     text-align: right; 

      li { 
       display: inline-block; 
       } 
     } 

} 

任何幫助，這將是巨大的。

很多感謝， 亞歷

Answer 1

爲了解決這個問題我用的歐米茄（）將其添加到導航元素的屏幕較小，包括：

nav { 
    @include span-columns(2); 
    @include omega(); 
    text-align: right; 

     @include large { 
      @include span-columns(6); 
      text-align: center; 

        li { 
         display: inline-block; 
        } 

        .hide{ 
         display: none; 
        } 
      } 
} 

現在我的標誌和導航是水平以較小的屏幕尺寸對齊。