Overlaping sections using Bootstrap and CSS

Question

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

<section class="second-section">
    <div>
        <div class="container">
            <div class="row">

                <div class="col-sm-7 content">
                    <img src="images/second_phone_section.png" alt="Second iPhone image"/>
                </div>

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

                    <p>01/05 <br>
                    <i class="fa fa-angle-left"></i> &nbsp; &nbsp; <i class="fa fa-angle-right"></i>
                    </p>
                </div>

            </div>
        </div>
    </div>
</section>

<section class="third-section">
        <div class="container">
            <div class="row">

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

                    <div class="col-sm-4 content">
                        <img src="images/third_row_van.jpg" alt="Van Image"/>
                    </div>

                    <div class="col-sm-4">
                        <img src="images/third_row_branches.jpg" alt="Branches Image"/>
                    </div>

                </div>
            </div>
</section>

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.

Answer 1

Shortly after the post I found out that also adding a background color to individual block elements and applying padding to both top & 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.