bootstrap navbar doesnt align as expected when toggled - html

Question

Why is the <ul> elements does not align properly(the home active link should and the rest of the toggled link should be under brand) as seen on the image.
The Code:
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
Sample Brand
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Blog</li>
<li>Social Media</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>

Answer 1

after i show the tuturial there is problem with bootsrap css .
the button has float:right element and we need to clear it.
please add class to your css file
.clear{
clear:both;
}
then use your code with this class
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
Sample Brand
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse clear">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Blog</li>
<li>Social Media</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
fiddle here -
https://jsfiddle.net/05aah0tb/