Twitter Bootstrap 3 - Losing container full width on affix scroll - css

Question

Twitter Bootstrap 3.3.7
I have the following two navs:
<nav class="navbar navbar-default navbar-fixed-top" id="topNavBar">
<div class="container-fluid"></div>
</nav>
<nav class="navbar navbar-default navbar-lower" role="navigation" data-spy="affix" data-offset-top="50" data-offset-bottom="80">
<div class="container container-navbar">
<div class="row take-test-heading">
<asp:Label ID="lblTakeTestTitle" runat="server" Text="Take Text Title Here...."></asp:Label>
<asp:Label ID="lblTakeTestTimeRemaining" runat="server" Text="00:00"></asp:Label>
<i class="fa fa-bars pull-right"></i>
</div>
<div class="row take-test-heading-two">
</div>
</div>
</nav>
with the following CSS:
body {
margin-top: 50px;
padding-top: 0px !important;
}
.container-navbar {
}
.take-test-heading {
background-color: rgb(51, 122, 183);
height: 20px;
color: white;
font-size: 18px;
font-weight: 700;
margin-left: 10px;
margin-right: 20px;
margin-top: 5px;
}
.navbar-lower {
z-index: 999;
}
which gives me the following when the page is first rendered:
and then as I scroll (note the top affix):
I have a couple of issues that no matter what CSS changes I make I cannot seem to solve:
I want the blue bar "Take Text Title..." to be 100% and occupy the entire width of the viewport (yellow areas)
When scroll spy kicks in the navbar goes to 1170px (!) and is no longer full width (see green area). I want it to be full width all the time.
Cam someone please point me in the right direction here?

Answer 1

In bootstrap 3 .container has 15px of padding-left and padding-right. You can set both to 0px; manually.
Also setting margin-left and margin-right to 0px will do the trick
.take-test-heading {
background-color: rgb(51, 122, 183);
height: 20px;
color: white;
font-size: 18px;
font-weight: 700;
margin-left: 0px;
margin-right: 0px;
margin-top: 5px;
}