Bootstrap Dropdown Incorrectly Highlighting

Question

In the image below if you look to where arrow is pointing you can see a very small sliver of the navbar that does not get 'highlighted' when the dropdown is opened. I've never seen this before and have no clue what's causing it, and if someone could provide a fix while explaining why it happens that would be fantastic. Here is a JSFiddle.

Navbar Code

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                @if(!Auth::check())
                    <li><a href="login"><img class="navbar-avatar" src="{{ asset('src/img/login_steam.png') }}"></a></li>
                @else
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span>{{ Auth::user()->username }}</span><img class="navbar-avatar" src="{{ Auth::user()->avatar }}"></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Dashboard</a></li>
                            <li><a href="#">Settings</a></li>
                            <li><a href="#">Logout</a></li>
                         </ul>
                    </li>
                @endif
            </ul>
        </div>
    </div>
</nav>

CSS

.navbar {
    margin-bottom: 0;
    height: 70px;
}
.navbar-default {
    background-color: #383838;
    border-color: #383838;
}
/* title */
.navbar-default .navbar-brand {
    color: #777;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
    color: #5E5E5E;
}
/* link */
.navbar-default .navbar-nav > li > a {
    color: #8D8D8D;
    font-family: Open Sans;
    font-size: 14px;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #8D8D8D;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    color: #6C6C6C;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
    color: #6C6C6C;
    background-color: #2E2E2E;
}

.navbar-avatar {
    width: 45px;
    height: 45px;
    position: relative;
    float: right;
    top: -4px;
    margin-left: 8px;
    margin-right: 8px;
}

.navbar-user {
    padding: 0;
    margin: 0;
    display: inline-block;
    padding-top:7px;
}

.navbar-steam {
    position: relative;
    float: right;
    top: 8.6px;
    margin-right: 8px;
}

.navbar-nav > li > a {
    padding-top: 15px;
    padding-bottom: 25px;
}

Answer 1

Here's an updated Fiddle:

https://jsfiddle.net/tobyl/Laaej9ya/

The only change I made was:

.navbar {
    margin-bottom: 0;
    height: 68px;
}

The height of .navbar and the height of the elements controlling the position of the dropdown were slightly different.