Проблема с загрузочным заполнением с изображением

Question

У меня есть две половины в моей строке, каждая из которых содержит по шесть столбцов. Я использую изображение в качестве фона для 6 столбцов, которые, как предполагается, занимают половину экрана. Когда я использую push в своих столбцах, чтобы нажимать изображение с шестью столбцами справа от экрана, он создает некоторые дополнения с правой стороны, как показано ниже.

Дно изображение не имеет проблем отступов и занимает весь 6 столбцов без проблем. Когда я удаляю push и pull из столбцов в верхнем изображении, все работает нормально. Я не уверен, как исправить проблему заполнения в правой части верхнего изображения. Есть идеи? Мой код ниже.

<!-- 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" & запас правый:. -15px "от" .fam-Col-влево "и" .bus-Col-влево», кажется, решить эту проблему

скрипку - 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; 
}