I'm having trouble getting my navbar-right elements to align with my navbar-brand section. I need assistance with this. I want them to align, but here's how the element should look: https://i.sstatic.net/Fettu.jpg
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"><a href="#">Home</a></li>
<li class=""><a href="#">About Us</a></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;
}