Bourbon neat horizontal align div after display none

Question

I have a header with 3 elements at full size layout (12 column grid):

left= logo (3 columns), middle= nav (6 columns), right= social media (3 columns)

At a smaller size (4 column grid) I've set "social media" to display none, "logo" and "nav" are both two column. They are not horizontally aligned the second element displays under the first both spanning two columns but not next to each other. I've tried floating, clearing and all that jazz but no joy.

Here is the 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>

Here is the 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;
                }
         }

}

Any help with this would be great.

Many thanks in advance, Alex

Answer 1

To fix this I used the omega() include by adding it to the nav element for smaller screens:

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

Now my logo and nav are horizontally aligned at smaller screen sizes.