How to achieve this layout with Bootstrap 3 - css

Question

I was wondering if someone knows how I cam accomplish this using Bootstrap 3 while not hacking it.
As you can see from the picture below I'd like to have an inverted navbar at the top. Underneath I'd like to have a bar with black bg that only goes so far (for instance 4 columns with dark bg and the remaining 8 columns with light bg). That's the easy part. The problem I've found is how have the container bg have different colour of background.
At the moment I have this:
That's been achieved using this code:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container nt-container">
<div class="nt-header-top row">
<div class="col-md-4">
<h1 class="nt-logo">New Project</h1>
</div>
<div class="col-md-8 text-right">
<h3>Some slogan here</h3>
</div>
</div>
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="row">
<div class="col-md-2">
<ul class="nav navbar-nav">
<li class="active"><span class="glyphicon glyphicon-home"></span></li>
<li><span class="glyphicon glyphicon-list"></span></li>
<li><span class="glyphicon glyphicon-envelope"></span></li>
</ul>
</div>
<div class="col-md-10 nt-top-title-bar">
<section class="row">
<div class="col-md-8 more-padding-left">
<h2 class="">Some slogan here</h2>
</div>
<div class="col-md-4 text-right">
<ul class="nav navbar-nav navbar-right">
<li class="active"><span class="glyphicon glyphicon-home"></span></li>
<li><span class="glyphicon glyphicon-list"></span></li>
<li><span class="glyphicon glyphicon-envelope"></span></li>
</ul>
</div>
</section>
</div>
</div>
</div>
<div class="container nt-container">
<div class="row">
<section class="col-md-2 nt-side-menu-section">
<ul class="list-group">
...
</ul>
</section>
<div class="col-md-5 more-padding-left">
<h2>Heading 1</h2>
<p>...</p>
</div>
<div class="col-md-5">
<h2>Heading</h2>
<p>...</p>
</div>
</div>
<hr>
<footer>
<p>© Company 2013</p>
</footer>
I though maybe I could add div on the right gutter with a light background on top of the container background, but I thought this very hackish and inelegant.
Any suggestions on how to achieve this?

Answer 1

Ok...if I have this right the element in question has a class of .nt-top-title-bar.
You can do this with a pseudo element by adding:
.nt-top-title-bar:after {
content: "";
position: absolute;
background: insert your color here; /* Match the background of menubar*/
top: 0;
bottom: 0;
width: 9999px; /* some huge width */
left: 100%;
}
Codepen Example
CSS-Tricks Reference