Bootstrap 3 auto centering and auto padding the whole page by default? - css

Question

TB3 here, and here's my jsfiddle. As you can see, all the content (the header, the main body and the footer) seem to be contained inside something that is causing it to be padded + centered. I would like all this content to take up 100% the width of the page/viewport.
I suspect that it may have something to do with the navbar:
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
...
...perhaps these classes "auto-pad" and "auto-center" by default and need to be overwritten? Any ideas as to where I'm going awry?

Answer 1

You need to remove the overall "container" to container-fluid that you have at the start of your document because that is what is containing and making it center.
$('.orgSelector').dropdown();
$('.orgSelector').tooltip();
.acLogo {
background-image : url("http://placehold.it/250x150");
}
.form-signin {
max-width: 330px;
padding: 15px;
margin: 0 auto
}
.form-signin .form-signin-heading, .form-signin .checkbox {
margin-bottom: 10px;
}
.form-signin .checkbox {
font-weight: normal;
}
.form-signin .form-control {
position: relative;
font-size: 16px;
height: auto;
padding: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.form-signin .form-control:focus {
z-index: 2;
}
.form-signin input[type="text"] {
margin-bottom: -1px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.form-signin input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.account-wall {
margin-top: 20px;
padding: 40px 0px 20px 0px;
background-color: #f7f7f7;
-moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
}
.login-title {
color: #555;
font-size: 18px;
font-weight: 400;
display: block;
}
.profile-img {
width: 96px;
height: 96px;
margin: 0 auto 10px;
display: block;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
.need-help {
margin-top: 10px;
}
.new-account {
display: block;
margin-top: 10px;
}
img.user-summary {
max-width: 100%;
height: auto;
}
div.user-summary {
margin: 10px auto;
}
div.user-summary > img {
width: 80px;
height: 80px;
float: left;
margin: 0 5px;
}
div.user-name {
margin: 15px 0 0 0;
font-style: italic;
display: block;
}
div.user-status {
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="container-fluid">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand acLogo" style="height:auto; width:50%;" href="/"></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><b>FEATURES</b></li>
<li><b>COMPARE US</b></li>
<li><b>FIZZBUZZ</b></li>
<li><b>FOOBAR</b></li>
<li><b>DOCS</b></li>
</ul>
<form class="navbar-form navbar-right" action="/app/dashboard/search" method="POST">
<ul class="nav navbar-nav navbar-right">
<li><button type="button" class="btn btn-success">Sign up</button></li>
<li><a href="/app/dashboard">
<button type="button" class="btn btn-link">Sign in</button>
</a></li>
</ul>
</form>
</div>
</div>
</nav>
</div>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>