bootstrap header Fix - html

Question

What I'm experiencing difficulty is that my navbar-right elements won't align with my navbar-brand part. I need help with this. I want to align them but the element would be like this
header.html
<header>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-collapse">
<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="#">
{{ Html::image('assets/images/logo.png') }}
</a>
</div>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li class="">About Us</li>
</ul>
</div>
</div>
</header>
style.css
.navbar-text > a {
color: inherit;
text-decoration: none;
}
body {
padding-top: 70px;
padding-bottom: 100px;
}
.navbar-default{
background-color:#005b96;
border-color:#005b96;
font-family: 'Roboto', sans-serif;
font-size: 15px;
position:absolute;
top: 25px;
left:100px;
right:100px;
}
.navbar-brand {
width: 100px;
height: 50px;
}
.navbar-default .navbar-brand > img {
width: 130px;
height:50px;
position: absolute;
top: 5px;
padding-top:5px;
padding-bottom: 5px;
margin-left: auto;
}
.row{
position:absolute;
top: 25px;
left:115px;
right:115px;
}
.panel{
margin-top:100px;
}

Answer 1

Example. The issue is actually with your markup. Your .container should also wrap
<div class="navbar-collapse collapse">
......
</div>
Like so:
<header>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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="#">
{{ Html::image('assets/images/logo.png') }}
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li class="">About Us</li>
</ul>
</div>
</div>
</div>
</header>

Answer 2

Is this your desired result? http://screencast.com/t/5drms5A0f
If yes, here is how I achieved that:
.navbar-collapse.collapse {
position: absolute;
right: 50px;
top: 26px;
}
Also, I would put that in min 768 px media query.