Элемент max-width в аккуратной сетке создает правое поле

Question

Я относительно новичок в Bourbon Neat, и после недавнего обновления я немного растерялся. У меня есть пользовательская сетка, для которой я настроил медиазапросы. Элементы в сетке содержат фотографию 500x500 с описанием внизу. Моя проблема в том, что если я установлю максимальную ширину для div, содержащего изображение, равным 500px, сетка выравнивается по левому краю, а справа создается поле с шириной, превышающей элементы + желоба. Если я удаляю max-width, он идеально центрируется, но содержащийся div становится шире, чем изображение, которое мне не нужно. Как я могу центрировать мои элементы максимальной ширины на этой ширине? дисплей: блок; и маржа: авто ничего не делает.

Я использую HAML и SASS.

HAML:

.video-grid
  .video-section#film-tv
    %span.parallelogram
      %h2.parallelogram-title Film and TV
    .film-tv-videos
      %a{:href => "/hardearth/"}
        .video-slide-wrap
          .video-slide
            .video-slide-img-wrap
              %img.video-slide-img{:src => "/images/500x500/hard-earth.jpg"}
          %p.tiny-caption Teaser for Feature Film
          %h6.video-slide-title The Hard Earth
          %p.video-slide-description Documentary exploring America's relationship to Ukraine
      %a{:href => "/vaselinescreen/"}
        .video-slide-wrap
          .video-slide
            .video-slide-img-wrap
              %img.video-slide-img{:src => "/images/500x500/vaseline-screen.jpg"}
          %p.tiny-caption TV Show
          %h6.video-slide-title Vaseline Screen
          %p.video-slide-description Blur pop visions of what life could be like if we loved things we hate.
      %a{:href => "/videos/patrick"}
        .video-slide-wrap
          .video-slide
            .video-slide-img-wrap
              %img.video-slide-img{:src => "/images/500x500/patrick.jpg"}
          %p.tiny-caption Short Film
          %h6.video-slide-title Patrick Worth Dying For
          %p.video-slide-description Playing foreclosure as it lays.
      %a{:href => "/videos/californiapsych/"}
        .video-slide-wrap
          .video-slide
            .video-slide-img-wrap
              %img.video-slide-img{:src => "/images/500x500/california-psych.jpg"}
          %p.tiny-caption Short Film
          %h6.video-slide-title California Psych
          %p.video-slide-description Transcendental ending to an otherwise rotten country.
      %a{:href => "/videos/badcredit/"}
        .video-slide-wrap
          .video-slide
            .video-slide-img-wrap
              %img.video-slide-img{:src => "/images/500x500/bad-credit.jpg"}
          %p.tiny-caption Short Film
          %h6.video-slide-title Bad Credit Good Moms
          %p.video-slide-description Mom moves out of filmmaker's childhood home.

SASS:

$videos-grid: (
  columns: 4,
  gutter: 30px,
  media: 1660px,
);

$videos-grid-2:(
  columns: 3,
  gutter: 30px,
  media: 1440px,
);

$videos-grid-3: (
  columns: 3,
  gutter: 30px,
  media: 1140px,
);

$videos-grid-4: (
  columns: 2,
  gutter: 30px,
  media: 840px,
);

$videos-grid-5: (
  columns: 2,
  gutter: 30px,
  media: 570px,
);

$videos-grid-6: (
  columns: 1,
  gutter: 0px,
  media: 0px,
);


.video-section
  @include grid-container($videos-grid)
  width: 100%
  padding-bottom: 30px
  position: relative
  margin: 0

.video-slide-wrap
  @include grid-column(1, $videos-grid-6)
  @include grid-media($videos-grid-5)
    @include grid-column(1)
  @include grid-media($videos-grid-4)
    @include grid-column(1)
  @include grid-media($videos-grid-3)
    @include grid-column(1)
  @include grid-media($videos-grid-2)
    @include grid-column(1)
  @include grid-media($videos-grid)
    @include grid-column(1)
  max-width: 500px
  text-align: left
  display: block
  margin: auto

.video-slide
  height: auto
  position: relative
  margin: auto
  color: $black
  overflow: hidden

.video-slide-img-wrap
  display: block
  margin: auto
  height: auto
  width: 100%
  max-width: 500px

.video-slide-img
  display: block
  height: auto
  width: 100%

.video-slide-description
  display: block
  margin: auto
  padding: 5px
  font-size: 0.9em
  line-height: 1.2

.video-slide-title
  display: block
  margin: auto
  text-align: center
  margin-bottom: 5px

.tiny-caption
  font-size: .8em
  font-style: italic

С максимальной шириной: 500 пикселей на.video-slide-wrap:

щель справа

Без указания максимальной ширины в.video-slide-wrap:

элементы сетки по центру, но уродливые вещи вокруг изображения

Answer 1

Предполагается, что ваша цель состоит в том, чтобы иметь серию синих прямоугольников с изображениями, которые растут до тех пор, пока каждое из них не станет размером 500 пикселей, а затем перестает расти, но вместо этого растут дальше друг от друга.

Сначала я думаю, что вы должны объединить свои %a{:href => "…"}и .video-slide-wrap а затем дать .video-slide Синий background-color а также max-width,

Трудно вернуть всю схему обратно, но это может выглядеть примерно так:

%a.video-slide-wrap{:href => "/vaselinescreen/"}
  .video-slide
    img
    text

а потом для дерзости

.video-slide-wrap
  @include grid-column(1, $videos-grid-6)
  @include grid-media($videos-grid-5)
    @include grid-column(1)
  @include grid-media($videos-grid-4)
    @include grid-column(1)
  @include grid-media($videos-grid-3)
    @include grid-column(1)
  @include grid-media($videos-grid-2)
    @include grid-column(1)
  @include grid-media($videos-grid)
    @include grid-column(1)

.video-slide
  max-width: 500px
  text-align: left
  display: block
  margin: 0 auto
  background: blue;

Нечто подобное должно, вероятно, работать.