HTML nested div outside of parent div - html

Question

I'm having issues with my divs appearing outside of their parent div. This only happens when the window is on a computer in full screen mode, but when the screen is made smaller to a phone/tablet size the divs function how they should. In this codepen I used border colours to help distinguish from when the divs are outside of the parent div to when they're inside the parent div. http://codepen.io/MarkBond/pen/LVKPjG?editors=110
fullscreen
phone view
HTML
<div class="ibox-content" id="ibox-9">
<!--DIV BODY-->
<div class="content active" id="budgetSelection">
<div class="col-lg-6">
<label>Budget Scenerio</label>
<div class="checkbox">
<label><input type="checkbox" />50mill</label>
</div>
<div class="checkbox">
<label><input type="checkbox" />100mill</label>
</div>
<label>Table Views</label>
<div class="checkbox">
<label><input type="checkbox" />Table1</label>
</div>
</div>
<div class="col-lg-6">
<div class="radio">
<label><input type="radio" />Show Treatments</label>
</div>
<div class="radio">
<label><input type="radio" />Show Years</label>
</div>
</div>
</div>
</div>

Answer 1

you can give a container-fluid class to your div body.
Bootply Link
<div class="content active container-fluid" id="budgetSelection">
you can also go for clearfix which fixes the problem too.

Answer 2

Your divs are floated on the full screen view, so the parent container needs some sort of clearfix applied to it. You should be able to just add the "clearfix" class if you're using bootstrap.
<div class="content active clearfix" id="budgetSelection" ng-controller="InfoController as infoCtrl">

Answer 3

Give width 100% to class col-lg-6. Currently it is 50% for #media (min-width: 1200px).
.col-lg-6 {
width: 100%;
}