Get two columns with different background colors that extend to the edge of the screen

Question

Not a duplicate of this .

I am trying to create two columns on a webpage that have different background colors that expand to the edges of the screen. But the contents of the columns should remain within the width of the boot box.

It should look like this:

I found this answer , which almost worked, but the internal content was incorrectly aligned in width in the box, especially on large screens over 1600 pixels. It basically looked like this:

The following is a snippet of the code nearest I can get it to work, this may be the wrong approach completely:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container" style="background: bisque;">
	<div class="row">
		<div class="col-xs-12">
			<h1>Normal Boxed Width</h1>
		</div>
	</div>
</div>
<div class="container-fluid">
	<div class="row" style="background-color: aquamarine; padding: 0">
		<div>
			<div class="col-sm-8 col-sm-offset-1">
                <h1>Left Panel</h1>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae doloribus unde, distinctio a autem, soluta nulla similique. Vero natus deleniti, culpa consequuntur eveniet beatae laudantium in fuga mollitia sapiente! Assumenda!</p>
			</div>
			<div class="col-sm-3 gray-background" style="background-color: rebeccapurple;padding: 10px;color:#fff">
              <h1>Right Panel</h1>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, beatae amet est repellendus optio, exercitationem distinctio quasi ut, sapiente, nihil sed libero facere fugiat eaque numquam nulla mollitia suscipit nobis.</p>
			</div>
		</div>
	</div><!--  .row -->
</div><!--  .container-fluid -->

Run codeHide result

Answer 1

DIV ...

<div class="container" style="background: bisque;">
    <div class="row">
        <div class="col-xs-12">
            <h1>Normal Boxed Width</h1>
        </div>
    </div>
</div>
<div style="background-color: aquamarine; padding: 0">
    <div class="container">
        <div class="row">
            <div>
                <div class="col-sm-9">
                    <h1>Left Panel</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae doloribus unde, distinctio a autem, soluta nulla similique. Vero natus deleniti, culpa consequuntur eveniet beatae laudantium in fuga mollitia sapiente! Assumenda!</p>
                </div>
                <div class="col-sm-3 gray-background" style="background-color: rebeccapurple;padding: 10px;color:#fff">
                    <h1>Right Panel</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, beatae amet est repellendus optio, exercitationem distinctio quasi ut, sapiente, nihil sed libero facere fugiat eaque numquam nulla mollitia suscipit nobis.</p>
                </div>
            </div>
        </div>
        <!--  .row -->
    </div>
    <!--  .container-fluid -->
</div>

psuedo, ..

.right:before {
    right: -999em;
    background: rebeccapurple;
    content: '';
    display: block;
    position: absolute;
    width: 999em;
    top: 0;
    bottom: 0;
}

http://www.codeply.com/go/YssQ5T7pxq

---

Bootstrap 4

---

: