깔끔한 격자의 최대 너비 요소가 오른쪽 여백을 만듭니다.

Question

저는 Bourbon 깔끔한면에 비교적 새로운데, 최근 업데이트 이후로 나는 조금 잃어 버렸습니다. 미디어 쿼리를 설정 한 사용자 지정 표가 있습니다. 그리드의 요소에는 설명이있는 500x500 사진이 있습니다. 내 문제는 최대 폭을 이미지를 포함하는 div에 500px로 설정하면 그리드가 왼쪽으로 정렬되고 오른쪽에 여백이 요소 + 거터보다 큽니다. 최대 너비를 제거하면 완벽하게 중심에 있지만 포함 된 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 

MAX-폭

없음 MAX-폭

gap on right

: .video 슬라이드 랩에 500 픽셀 .video-slide-wrap 설정 :

이 목표를 가정 한 것입니다 17,451,515,

grid elements centered but ugly stuff around image

Answer 1

큰 점점 중단 후 500 픽셀을하게하고 각 때까지 성장 이미지 승/파란색 상자의 시리즈를 가지고 있지만, 대신에 서로 멀리 떨어져 성장하는 것입니다.

먼저 최대 난 당신이 %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 

합니다.