ニートグリッドのmax-width要素が右マージンを作成します

Question

私はBourbon Neatには比較的新しいですし、最近のアップデートからは少し失われてしまいました。私はメディアクエリを設定したカスタムグリッドを持っています。グリッド内の要素には、下に説明がある500x500の写真が含まれています。私の問題は、画像を含むdivに最大幅を500ピクセルに設定し、グリッドが左に揃えられ、余白が要素+樋よりも大きい幅で右側に生成される場合です。最大幅を削除すると完全に中心になりますが、含まれているdivは望ましくない画像よりも広くなります。どのようにして最大幅の要素をこれらの幅に合わせることができますか？表示ブロック; margin：autoは何もしません。

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

：.video-スライドラップ上500pxなど：なし最大幅で

gap on right

.video-slide-wrapに設定：

grid elements centered but ugly stuff around image

Answer 1

これは、あなたの目標は、それらのそれぞれが500pxなどになり、その後、大きくなっやめ、代わりに互いから遠く離れて成長するまでに成長画像/ wの青い箱のシリーズを持つことであると仮定しています。

は、最初にアップ私はあなたの%a{:href => "…"}年代と.video-slide-wrapを組み合わせ、その後.video-slide青background-colorとmax-widthを与えるべきだと思います。

それはあなたの全体のレイアウトをbacksolveするのは難しいのですが、これは次のようになります。それは、おそらく仕事を™なければならないような

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

何かを

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

をして、SASSのため。