Bootstrap: Setting overlay div on responsive block columns

I'm trying to make a responsive page of 4 blocks using rows and columns with an image background and an overlay and title. I'm able to get everything to work except the width of the overlay.

Here is an image showing what I'm trying to fix. The column on the left side is always filled from left, but the right column is missing the full width of left and right side.

HTML

<div class="wrapper">
    <div class="row" id="rows">
        <div class="col-sm-6 col-md-6 col-lg-12 text-center portfolio">
            <div id="portfolio-overlay" class="titlePush">Portfolio</div>
        </div>
        <div class="col-sm-6 col-md-6 col-lg-4 text-center tools">
            <div id="tools-overlay" class="titlePush">Tools</div>
        </div>
        <div class="col-sm-6 col-md-6 col-lg-4 text-center about">
            <div id="about-overlay" class="titlePush">About</div>
        </div>
        <div class="col-sm-6 col-md-6 col-lg-4 text-center contact">
            <div id="contact-overlay" class="titlePush">Contact</div>
        </div>
    </div>
</div>

CSS

html,body,.wrapper {
    height:100%;
    width:100%;
}

#rows {
    height: 30%;
    font-family: 'Poiret One', cursive;
    font-size: 24px;
    color: white;
}


.portfolio {
    height: 100%;
    background: url("https://www.topdraw.com/assets/uploads/2015/07/HiRes2.jpg");
    -webkit-background-size:;
    background-size: cover;
    background-position: center;
}

/* Portfolio Overlay Block */
#portfolio-overlay {
    background: rgb(0, 0, 0); /* fallback color*/
    background: rgba(0, 0, 0, 0.4);
    height: 100%;
    max-width:100%;
}

Demo: JSFiddle