Overlaping sections using Bootstrap and CSS I'm currently converting a PSD to a web template and attempting to overlap content and I'm running into a issue with the 3rd section because there is  more padding than the first overlap and using the CSS style background-color covers wherever there is a block element but if there isn't anything in the pace a image takes priority.

I have a link to the github page where it is live in it's current state 

The phone image is above the background color of the next section, I've tried using z-index but it still seems to take priority over the next section. Does anyone know a css trick or the proper method to do this overlap like in the previous section I've overlapped the content.

Here is some of the HTML code 

&lt;section class="second-section"&gt;
    &lt;div&gt;
        &lt;div class="container"&gt;
            &lt;div class="row"&gt;

                &lt;div class="col-sm-7 content"&gt;
                    &lt;img src="images/second_phone_section.png" alt="Second iPhone image"/&gt;
                &lt;/div&gt;

                &lt;div class="col-sm-5 content"&gt;
                    &lt;h3&gt;DESIGN&lt;/h3&gt;
                    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. A amet assume consequatur deleniti eligendi eos, expedita fugit maxime, natus nostrumas officia &lt;b&gt;officiis quisquam quos&lt;/b&gt; repellendus verit verodasdfudgera voluptate. Nihil, perspiciatis puth.&lt;/p&gt;
                    &lt;button class="button" type="submit"&gt;GET STARTED&lt;/button&gt;

                    &lt;p&gt;01/05 &lt;br&gt;
                    &lt;i class="fa fa-angle-left"&gt;&lt;/i&gt; &amp;nbsp; &amp;nbsp; &lt;i class="fa fa-angle-right"&gt;&lt;/i&gt;
                    &lt;/p&gt;
                &lt;/div&gt;

            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/section&gt;

&lt;section class="third-section"&gt;
        &lt;div class="container"&gt;
            &lt;div class="row"&gt;

                    &lt;div class="col-sm-3 text-center content"&gt;
                        &lt;img src="images/camera_green.png" alt="Camera Image"/&gt;
                        &lt;h3&gt;OUR COMMUNITY&lt;/h3&gt;
                        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit.&lt;/p&gt;
                    &lt;/div&gt;

                    &lt;div class="col-sm-4 content"&gt;
                        &lt;img src="images/third_row_van.jpg" alt="Van Image"/&gt;
                    &lt;/div&gt;

                    &lt;div class="col-sm-4"&gt;
                        &lt;img src="images/third_row_branches.jpg" alt="Branches Image"/&gt;
                    &lt;/div&gt;

                &lt;/div&gt;
            &lt;/div&gt;
&lt;/section&gt;


The CSS 

/* ================== SECOND SECTION =================== */

.second-section {
    background-color: #FFF;
    margin-top: -300px;
}
.second-section .content {
    background-color: #FFF;
    padding-top: 150px;
}

.second-section h3 {
    word-spacing: 5px;
    letter-spacing: 2px;
    line-height: 1.25em;
    color: #16a085;
}

.second-section img {
    z-index: -10;
}

.second-section p {
    font-size: 1em;
    line-height: 2em;
}

.second-section p:last-of-type {
    padding-top: 50px;

}
.second-section i {
    font-size: 2em;
    font-weight: bold;
}

/* ===========================  THIRD SECTION =========================== */

.third-section {
    background-color: #f5f6f7;
    margin-top: -150px;
    padding-top: 150px;
    z-index: 10;
}
.third-section .content {
    background-color: #f5f6f7;
}

.content {
    background-color: #f5f6f7;

}


Essentially I'm just using margin to pull the next section up and overlap the previous section. If someone knows of a better way that's utilizing bootstrap or pure CSS that would be great but i've tried several different things.
Shortly after the post I found out that also adding a background color to individual block elements and applying padding to both top &amp; bottom will actually stretch out the background-color and allow of the use of margins to cover other elements like so

.grayBG {
    background-color: #f5f6f7;
    padding-top: 100px;
    padding-bottom: 100px;
}


and

.whiteBG {
background-color: #FFF;
padding-top: 150px;


}

then with the use of a -margin I was able to pull sections to overlap each other like so. 

.second-section {
background-color: #FFF;
margin-top: -300px;
padding-bottom: 0;


}

There is probably a better and more efficient way of doing this but, this seemed to work for me just fine.