How I do to fix the hover? - css

Question

The hover is not covering all the height of the link, How I do to fix the hover?
I know that the combination of colors is not correct but is only for testing*
I'm using Bootstrap 4.3.1
.navbar .collapse ul li{
}
.navbar .collapse ul li a{
font-family: 'Comfortaa', cursive;
font-size: 20px;
color: skyblue !important;
}
.navbar .collapse ul li a:hover{
background-color: deepskyblue;
height: 100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<a class="navbar-brand mx-5" href="#">
<img src="Resources/Images/bootstrap-solid.svg" width="30" height="30" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto mx-3">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">News</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>

Answer 1

Your first div's .navbar class is adding padding. That's why the hover is not displaying like you want.
FIX: Remove padding (top & bottom) by adding this CSS
.navbar {
padding: 0 1rem;
}