Bootstrap navtab hover does not cover full tab - hover

Question

I'm using bootstrap nav tab to make the main page tabs.
I made it in a way that when a user hover the mouse over any tab, it changes color. The problem that I'm having right now is that the hover does not cover the entire range of each tab. I looked around webs to solve this issue but I wasn't able to address this issue.
HTML
<header>
<a href="#">
<img src="../static/img/the_logo_original_fixed.jpg" style="width: 140px;height:100px;" class="the_logo">
</a>
<nav class="navbar navbar-light bg-faded">
<ul class="nav nav-tabs" style="border-bottom:0px">
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Support</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</nav>
</header>
CSS
.the_logo{
margin-top: 20px;
margin-bottom: 20px;
}
nav.navbar.navbar-light.bg-faded{
background-color: #3081B7;
}
a{
color: white !important;
font-size: 120%;
}
.nav.nav-tabs > li > a:hover,
.nav.nav-tabs > li > a:active,
.nav.nav-tabs > li > a:focus{
background-color: #5FA6D5 !important;
border: none;
color: #5FA6D5;
}

Answer 1

Try adding the hover functionality to the list item not to the anchor tag because the anchor tag is smaller it only covers the text area.