Bootstrap Dropdown Incorrectly Highlighting
<p>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 <a href="https://jsfiddle.net/m448g7dw/" rel="nofollow noreferrer">JSFiddle</a>.</p>

<p><a href="https://i.stack.imgur.com/SMKkS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SMKkS.png" alt="enter image description here"></a></p>

<p>Navbar Code</p>

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

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

<p>CSS</p>

<pre><code>.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 &gt; li &gt; a {
    color: #8D8D8D;
    font-family: Open Sans;
    font-size: 14px;
}
.navbar-default .navbar-nav &gt; li &gt; a:hover,
.navbar-default .navbar-nav &gt; li &gt; a:focus {
    color: #8D8D8D;
}
.navbar-default .navbar-nav &gt; .active &gt; a,
.navbar-default .navbar-nav &gt; .active &gt; a:hover,
.navbar-default .navbar-nav &gt; .active &gt; a:focus {
    color: #6C6C6C;
}
.navbar-default .navbar-nav &gt; .open &gt; a,
.navbar-default .navbar-nav &gt; .open &gt; a:hover,
.navbar-default .navbar-nav &gt; .open &gt; 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 &gt; li &gt; a {
    padding-top: 15px;
    padding-bottom: 25px;
}
</code></pre>