Boostrap .container with full width background, split down the middle?

Question

Is there any way to use a .container and then inside have a split 2 column layout where the columns have different background colors and reach all the way to the left and right of the page?

The following correctly centers and splits into two columns, but the backgrounds of each are also cropped to the width of the container.

<div class="container">
  <div class="col-sm-6">
    <p>Left content goes here.</p>
  </div>
  <div class="col-sm-6">
    <p>Right content goes here.</p>
  </div>
</div>

Images work better than words:

Answer 1

HTML

<div class="container-holder">
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <div class="gray-box">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam beatae quod quaerat nostrum ullam animi ea repellendus incidunt quia explicabo consequuntur pariatur obcaecati aliquid magnam laudantium ratione dicta eius id?
                    </p>
                </div>
            </div>
            <div class="col-md-6">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam beatae quod quaerat nostrum ullam animi ea repellendus incidunt quia explicabo consequuntur pariatur obcaecati aliquid magnam laudantium ratione dicta eius id?
                </p>
                 <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam beatae quod quaerat nostrum ullam animi ea repellendus incidunt quia explicabo consequuntur pariatur obcaecati aliquid magnam laudantium ratione dicta eius id?
                </p>
            </div>
        </div>
    </div>
</div>

CSS

.container-holder{
    overflow: hidden;
    background: white;
}
.gray-box{
    background: gray;
    padding: 0 15px 9999px 9999px;
    margin: 0 -15px -9999px -9999px;
}

jsfiddle DEMO