Foundation XY Grid: Strange margin only on the right

Question

I'm trying to create a site header using the Sticky plugin and Foundation's XY Grid. The inner <div class="grid-x"> keeps its margin only on the right and I'm failing in finding out why.

I can see in Chrome's inspector that there are negative margins on both sides, there must be some trick used here which I'm not aware of...

HTML:

<header class="grid-container fluid" data-sticky-container>
<!-- the following container has the margin -->
  <div class="top-bar sticky grid-x grid-margin-x" data-sticky> 
    <div class="cell shrink">a</div>
    <div class="cell shrink">b</div>
    <div class="cell shrink">c</div>
  </div>
</header>

If I do this, it works as expected:

<header class="grid-container full" data-sticky-container>
  <div class="top-bar sticky grid-x grid-padding-x" data-sticky> 
    <div class="cell shrink">a</div>
    <div class="cell shrink">b</div>
    <div class="cell shrink">c</div>
  </div>
</header>

It's also fine when I remove the grid-margin-x class. But having full on the container combined with grid-margin-x causes the right margin to appear too...

Answer 1

In general, combining the grid with another element, like top-bar is will cause conflict because these elements have padding and margin of their own.

Moving the grid inside the top-bar, solves this: https://codepen.io/rafibomb/pen/XGXKoz

<header class="grid-container fluid" data-sticky-container>
  <div class="top-bar sticky" data-sticky>
    <div class="grid-x grid-margin-x">
      <div class="cell shrink">a</div>
      <div class="cell shrink">b</div>
      <div class="cell shrink">c</div>
    </div>
  </div>
</header>