Add space using foundation grid mixins - sass

Question

I am trying to make a nav bar with sass and foundation grid. I have links in the nav bar, but I don't want them to each be @include grid-column(4); instead I would like them to be 3 columns each and then have an empty space of 3 columns on the right end. It would be something similar to this: (the email tab is currently hovered)

How do I add a space there with the Foundation Grid Sass Mixins.

Answer 1

I fixed the issue by just changing each id to @include grid-column(3); that were previously @include grid-column(4);. I believe this worked because they are in a row and the next column down is larger than 3 so it doesn't automatically jump to the nav bar above, but it lays underneath it.

My mixins are laid out something like this:

    header {
          @include grid-row;
         }
    h1 {
          @include grid-column(9);
    }
    .login{
       @include grid-column(3);
    } 
    nav {
          @include grid-column(12);
        } 
  #games {
          @include grid-column(3);
       }
    #email {
          @include grid-column(3);
       }
    #archive {
          @include grid-column(3);
       }
    .breadcrumbs {
       @include grid-column(12);
    }
    nav a {
}