I've been trying to solve this issue, but I can't seem to pinpoint the cause.
https://i.sstatic.net/Wzkv3.jpg
The problem lies in getting the menu and logo to align properly.
Below is my Nav HTML code:
<nav class="navbar navbar-fixed-top navbar-light bg-faded">
<!-- Toggle Button -->
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#nav-content">
☰
</button>
<!-- Nav Content -->
<div class="collapse navbar-toggleable-xs" id="nav-content">
<a class="navbar-brand" href="">MIGRATE</a>
<ul class="nav navbar-nav pull-right">
<li class="nav-item active">
<a class="nav-link scrollto" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link scrollto" href="#grid">Grid System</a>
</li>
<li class="nav-item">
<a class="nav-link scrollto" href="#tooltips">Tooltips</a>
</li>
<li class="nav-item">
<a class="nav-link scrollto" href="#tables">Tables</a>
</li>
<li class="nav-item">
<a class="nav-link scrollto" href="#carousel">Carousel</a>
</li>
<li class="nav-item">
<a class="nav-link scrollto" href="#cards">Cards</a>
</li>
<li class="nav-item">
<a class="nav-link scrollto" href="#forms">Forms</a>
</li>
</ul>
</div>
</nav>
As you can see, the brand and menu elements are not aligned properly next to each other.
You can view the JSFIDDLE HERE: https://jsfiddle.net/683onLeg/