Основание XY Grid: странное поле только справа

Question

Я пытаюсь создать заголовок сайта, используя плагин Sticky и XY Grid от Foundation. Внутренний <div class="grid-x"> остается только справа, и я не могу понять, почему.

Я вижу в инспекторе Chrome, что с обеих сторон есть отрицательные поля, здесь должен быть какой-то трюк, о котором я не знаю...

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>

Если я делаю это, он работает как ожидалось:

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

Это также хорошо, когда я удаляю grid-margin-x учебный класс. Но имея full на контейнере в сочетании с grid-margin-x вызывает появление правого поля тоже...

Answer 1

В общем, объединение сетки с другим элементом, таким как top-bar, вызовет конфликт, потому что эти элементы имеют собственные отступы и поля.

Перемещение сетки внутри верхней панели решает это: 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>