I think you’re looking for difficulties where they are not.
You should avoid nesting containers (.container and .container-fluid) because they are not nestable due to their padding etc… look at Bootstrap 3 Containers overview
Also, when you are nesting columns, all you need to do is to put a new row into one of your columns and put the nested columns right into it. See Bootstrap 3 Grid system – nesting columns, here’s their example:
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-xs-8 col-sm-6">
Level 2: .col-xs-8 .col-sm-6
</div>
<div class="col-xs-4 col-sm-6">
Level 2: .col-xs-4 .col-sm-6
</div>
</div>
</div>
</div>
The solution you’re looking for with your layout is very simple. You don’t necessarily need container-fluid in the header. Simply create a container for the center part above carousel and wrap it into a .wrap or any other class that you can style with width: 100%. Additionally, you can add some padding that container-fluid has.
<header class="wrap navbar-fixed-top">
<div class="container">
<div class="row">
<div class="col-xs-6" style="background-color: violet;">2</div>
<div class="col-xs-6 pull-right" style="background-color: lightblue;">3</div>
</div>
<span style="position:absolute;top:0;left:0">
A quick brown fox jumps over the lazy dog.
</span>
</div>
</header>
And somewhere in your CSS (I recommend style.less), you can style .wrap to 100% width, though it should be default width for every div without styles.
.wrap {
width: 100%;
}
I know this question is a lil bit older but it doesn’t matter. Hope I understood your question correctly.