Upon examining the Bootstrap example provided at: http://getbootstrap.com/examples/navbar/
I noticed there is a gap between the jumbotron and the navbar.
After delving into the example's CSS, I found that disabling this rule (twice):
.navbar {
margin-bottom: 20px;
}
Resulted in the gap disappearing. However, when attempting to replicate this on my own, the margin-bottom property has no effect. Why is this? And how can it be fixed?
<div class="container">
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<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>
<a class="navbar-brand" href="#">FOOBAR</a>
</div>
</div> <!-- /.container-fluid -->
</div>
<div class="jumbotron">
<h1>Test</h1>
</div>
</div>