bootstrap, how do i keep my container full width of screen - html

Question

I have the following code and the navbar stays full width regardless of screen size... good!
but the one below goes to width: 708 when it gets smaller and I just want it to also be 100%.
<div class="navbar navbar-static-top" id="navigation">
<div class="navbar-inner">
<div class="container-fluid">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="#"><img style="height:20px; padding: 0px; margin: 0px;" src="<?php echo Site::$imageFolder; ?>logo.png" alt="logo" /></a>
<div class="nav-collapse collapse">
<ul class="nav pull-right topRightIcons">
<li class="active"><i class="icon-user icon-white"></i></li>
<li><i class="icon-eject icon-white"></i></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<!-- THIS ONE HERE -->
<div class="row-fluid" id="topBar">
<div class="span12">
<p class="nav-text pull-right"><img src="http://placehold.it/15x15" alt="Your company logo"> Welcome ClientName</p>
</div>
</div>
#topBar is purely for colour, as is #navigation

Answer 1

You need to override the media query. Create a custom.css (any-name.css). Add this code inside it.
#media (max-width: 767px)
{
body {
padding-right: 0px;
padding-left: 0px;
}
}
Now it should stick container to browser width.
Important note - Never make any changes in existing stylesheet. Override it instead :-)