버번 스트레이트 수평 정렬 DIV

Question

I 가진 풀 사이즈 레이아웃의 3 개 요소 (12 컬럼 그리드)를 가진 헤더 :

왼쪽 = 로고 (3 열), 중간 = NAV (6 열), 오른쪽 = 소셜 미디어 (3 열)

"소셜 미디어"를 표시하도록 설정 한 적은 크기 (4 열 그리드)에서 "로고"와 "탐색"은 모두 두 개의 열입니다. 그것들은 가로로 정렬되지 않습니다. 두 번째 요소는 첫 번째 열과 두 번째 열 모두에서 표시되지만 서로 인접하지는 않습니다. 나는 떠 다니고, 지우고 모든 재즈를 연주했지만 기쁨은 없었습니다.

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; 
       } 
     } 

} 

것은 이것에 어떤 도움이 좋을 것 : 여기

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

는 SCS들입니다 : 여기

는 HTML입니다. 사전에

많은 감사, 알렉스

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; 
        } 
      } 
} 

지금 내 로고 및 탐색 수평이다 작은 화면 크기로 정렬됩니다.