Content breaking out of bootstrap rows - css

Question

Using bootstrap, the content within the rows is breaking out into the ones above and below. How can I secure the content so that the styling rules apply as they should?
HTML
<div class="row home">
<div class="hero-unit">
<div class="container">
<div class="container hero-header">
<h2>Good lorem catchphrase, here</h2>
<p>This text should sit under the header above, but in mobile, it and the header and buttons within this row should be centered. </p>
<button type="button" class="btn btn-ghost pull-left">contact us</button>
<button type="button" class="btn btn-ghost call-us">call us 24/7 <i class="fa fa-phone"></i></button>
</div>
</div>
<div class="col-lg-6">
</div>
</div>
<div class="row hero-family">
<div class="col-sm-12 col-md-6 col-lg-12">
<div class="container blurb">
<h1 class="header">All for the family</h1>
<p>This is just more filler text for this space in place of what will eventually go here. This should be centered above the people and button below, while the content above should not flow into this space when downsizing.The image below should maintain
its position at the bottom of the row and not come up when resizing either.</button>
</div>
</div>
</div>
<div class="row hero-family">
<div class="family-image"></div>
</div>
<div class="row we-can-help">
<div class="container">
<h1>We are here</h1>
<p>This content shouldn't break out of its row either, but still manages to. Not a good thing!</p>
</div>
</div>
JSFIDDLE: LINK
This is how it should look
Below 992px, it then starts looking like this:
Notice the image comes away from the bottom of its row and the collision of content between rows.