波旁整齐水平对齐的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; 
        } 
      } 
} 

现在我的标志和导航是水平以较小的屏幕尺寸对齐。