Bootstrap padding issue with an image

Question

I have 2 halves in my row set at 6 columns each. I am using an image as a background for 6 columns that is suppose to take up half of the screen. When I use push in my columns to push the 6 column image to the right of the screen, it creates some padding on the right hand side as seen below.

The bottom image has no padding issues and it takes up the entire 6 columns without a problem. When I remove push and pull from the columns in the top picture everything works fine. I'm not sure how to fix the padding issue on the right side of the top image. Any ideas? My code is below.

<!-- 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

removing those "margin-left:-15px" & margin-right:-15px" from ".fam-col-left" and ".bus-col-left" seems to solve that issue.

fiddle - https://jsfiddle.net/t0219k1w/1/

whole styles:

#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;
}