Sass 波旁纯水平对齐div后显示无

我有一个标题，在全尺寸布局下有3个元素（12列网格）：

左=徽标（3列），中=导航（6列），右=社交媒体（3列）

在较小的尺寸（4列网格）下，我将“社交媒体”设置为不显示，“logo”和“nav”都是两列。它们没有水平对齐。第二个元素显示在第一个元素下方，两个元素跨越两列，但不相邻。我试过漂浮，清理和所有的爵士乐，但没有乐趣

以下是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>

这方面的任何帮助都会很好

多谢各位，

---

Alex

为了解决这个问题，我使用了omega（）include，将其添加到较小屏幕的导航元素中：

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

现在，我的徽标和导航以较小的屏幕尺寸水平对齐

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