帶圖像的自舉填充問題

Question

我在我的行中設置了兩列，每列6列。我使用圖像作爲6列的背景，假設佔用屏幕的一半。當我在列中使用push來將6列圖像推到屏幕右側時，它會在右側創建一些填充，如下所示。

底部的圖像沒有填充的問題，它佔據了整個6列沒有問題。當我從頂部圖片的列中移除推拉時，一切正常。我不知道如何解決頂部圖像右側的填充問題。有任何想法嗎？我的代碼如下。

<!-- Families --> 
<div id="families"> 
<div class="container-fluid"> 
    <div class="row text-center"> 

     <div class="col-md-6 col-md-push-6 fam-col-left"> 
      <h2>Families & Individuals</h2> 
      <br> 

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus earum dolorum sapiente quod, voluptas optio, ducimus nemo rerum commodi porro laudantium nam. Veritatis ex enim culpa voluptatem, corporis? Distinctio, obcaecati.</p> 
     </div> 

     <div class="col-md-6 col-md-pull-6 fam-col-right"> 
      <ul class="list-unstyled"> 
      <li><i class="fa fa-map-o fa-align-center fa-fw fa-1x"></i>Text Title Goes Here</li> 
      <li><i class="fa fa-pie-chart fa-align-center fa-fw fa-1x"> </i>Text Title Goes Here</li> 
      <li><i class="fa fa-anchor fa-align-center fa-fw fa-1x"></i>Text Title Goes Here</li> 
      <li><i class="fa fa-graduation-cap fa-align-center fa-fw fa-1x"></i>Text Title Goes Here</li> 
      <li><i class="fa fa-calendar-check-o fa-align-center fa-fw fa-1x"></i>Text Title Goes Here</li> 
      <li><i class="fa fa-area-chart fa-align-center fa-fw fa-1x"></i>Text Title Goes Here</li> 
      </ul> 
     </div> 

    </div> <!-- end row --> 
</div> <!-- end container-fluid --> 
</div> <!-- end families --> 

<!-- Business --> 
<div id="business"> 
<div class="container-fluid"> 
    <div class="row text-center"> 

     <div class="col-md-6 bus-col-left"> 
      <h2>Business Owners</h2> 
      <br> 

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus earum dolorum sapiente quod, voluptas optio, ducimus nemo rerum commodi porro laudantium nam. Veritatis ex enim culpa voluptatem, corporis? Distinctio, obcaecati.</p> 
     </div> 

     <div class="col-md-6 bus-col-right"> 
      <a href="#" class="list-group-item"><i class="fa fa-angle-double-right fa-align-center fa-fw fa-1x"></i>Text Title Here</a> 
      <a href="#" class="list-group-item"><i class="fa fa-angle-double-right fa-align-center fa-fw fa-1x"></i>Text Title Here</a> 
      <a href="#" class="list-group-item"><i class="fa fa-angle-double-right fa-align-center fa-fw fa-1x"></i>Text Title Here</a> 
      <a href="#" class="list-group-item"><i class="fa fa-angle-double-right fa-align-center fa-fw fa-1x"></i>Text Title Here</a> 
      <a href="#" class="list-group-item"><i class="fa fa-angle-double-right fa-align-center fa-fw fa-1x"></i>Text Title Here</a> 
      <a href="#" class="list-group-item"><i class="fa fa-angle-double-right fa-align-center fa-fw fa-1x"></i>Text Title Here</a> 
     </div> 

    </div> <!-- end row --> 
</div> <!-- end container --> 
</div> <!-- business --> 

/*================== 
FAMILIES/BUSINESS 
===================*/ 

#families { 
margin-bottom: -50px; 
} 

.fam-col-left { 
margin-right: -15px; 
margin-left: -15px; 
background: url('../img/space.jpg'); 
background-position: 50% 50%; 
background-repeat: no-repeat; 

background-size: cover; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 

padding-top: 150px; 

text-align: center; 
height: 550px; 
color: #FCFFF5; /*white*/ 
} 

.fam-col-left p { 
width: 50%; 
margin: 0 auto; 
} 

.fam-col-right { 
padding-top: 100px; 
} 

.bus-col-left { 
margin-right: -15px; 
margin-left: -15px; 
background: url('../img/space.jpg'); 
background-position: 50% 50%; 
background-repeat: no-repeat; 

background-size: cover; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 

padding-top: 150px; 

text-align: center; 
height: 550px; 
color: #FCFFF5; /*white*/ 
} 

.bus-col-left p { 
width: 50%; 
margin: 0 auto; 
} 

.bus-col-right { 
padding-top: 100px; 
} 

.bus-col-right a { 
width: 50%; 
margin: 0 auto; 
} 

Answer 1

消除這些 「保證金左：-15px」 &保證金權： 「從」 .fam-COL-left 「和」 .bus-COL-左」似乎解決這個問題-15px

小提琴 - https://jsfiddle.net/t0219k1w/1/

整體風格：

#families { 
margin-bottom: -50px; 
} 

.fam-col-left { 
background: url('http://www.unoosa.org/res/timeline/index_html/space-2.jpg'); 
background-position: 50% 50%; 
background-repeat: no-repeat; 

background-size: cover; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 

padding-top: 150px; 

text-align: center; 
height: 550px; 
color: #FCFFF5; /*white*/ 
} 

.fam-col-left p { 
width: 50%; 
margin: 0 auto; 
} 

.fam-col-right { 
padding-top: 100px; 
} 

.bus-col-left { 
background: url('http://www.unoosa.org/res/timeline/index_html/space-2.jpg'); 
background-position: 50% 50%; 
background-repeat: no-repeat; 

background-size: cover; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 

padding-top: 150px; 

text-align: center; 
height: 550px; 
color: #FCFFF5; /*white*/ 
} 

.bus-col-left p { 
width: 50%; 
margin: 0 auto; 
} 

.bus-col-right { 
padding-top: 100px; 
} 

.bus-col-right a { 
width: 50%; 
margin: 0 auto; 
}