Nav Bar not being displayed as block - html

Question

For some reason my navbar from using a bootstrap theme isn't being displayed as block. I'm using the carousel template for my index.html page and wanted to use the same theme on the rest of my pages, just without the carousel. However when I take out the carousel my second div sits under my nav bar.
Here is the code for my navbar:
<div class="navbar-wrapper">
<div class="container">
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<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" href="index.html">Ecstatic Entertainment SK</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li class="active">What We Offer</li>
<li>Build Your Event</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
and a link to my fiddle, with my CSS on top of the bootstrap css:
https://jsfiddle.net/czz2Lm1n/

Answer 1

Your nav bar div (.navbar-wrapper) is in fact a block element, but it is also absolutely positioned.
Hence, it's been taken out of the normal flow and other divs ignore it. So your content ("second div") has moved up to the body edge since it doesn't see any other box to stop it.
In your code, one quick solution is to change the value of the position property for the class:
Original
.navbar-wrapper{position:absolute;top:0;right:0;left:0;z-index:20}
Revised
.navbar-wrapper{position:relative;top:0;right:0;left:0;z-index:20}
This works. Here's your fiddle, revised: https://jsfiddle.net/czz2Lm1n/3/
Now you can use position:absolute on all child elements of .navbar-wrapper, and they will position in relation to the containing block .navbar-wrapper.
If you want to learn more about the position property here's a good article:
https://developer.mozilla.org/en-US/docs/Web/CSS/position
Hope this helps. Good luck!

Answer 2

remove navbar-wrapper and container.
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<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" href="index.html">Ecstatic Entertainment SK</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li class="active">What We Offer</li>
<li>Build Your Event</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
here is fiddle: https://jsfiddle.net/czz2Lm1n/2/