Why is my active li bigger than the hover li's? - css

Question

I'm using Bootstrap 4 and created a simple navbar (here is the CodePen). My active li looks the way I like with a square orange background. However, when I hover over the other li's, the :hover ones are not as tall.
I want the hovers to be just like the active--orange and same size. I've used the inspector to try and figure out where the sizing is coming from but can't find anything that changes it. How do I fix that?
HTML
<header>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-custom">
<div class="container">
<a class="navbar-brand" href="#"><img src="https://s3.amazonaws.com/listing-naples/assets/listing-naples-logo.png" alt="Listing Naples Team Logo"></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">
<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="#">Properties</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Property</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Agents</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Agencies</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">News</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pages</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control-sm mr-sm-2 custom-input-sm" type="search" placeholder="MLS Number" aria-label="Search">
</form>
</div><!-- end collapse navbar-collapse div-->
</div><!-- end container div -->
</nav>
</header>
CSS
body {
font-family: 'Source Sans Pro', sans-serif;
}
.navbar-custom {
background-color:#000;
padding: 1.5rem;
}
header li {
padding: .5rem;
margin:0;
}
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
color: rgba(255,255,255,.8);
}
/* change the link color */
.navbar-custom .navbar-nav .nav-link {
color: rgba(255, 255, 255, 0.5);
font-weight:400;
font-size: 1rem;
}
/* change the color of active or hovered links */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:focus .nav-link,
.navbar-custom .nav-item:hover .nav-link {
color: white;
background-color: orange;
}
.active {
background-color: orange;
}

Answer 1

From your CSS code
.navbar-custom .nav-item:hover .nav-link
you are setting the background-color to orange of nav-link which is the anchor tag
While this line
.active {
background-color: orange;
}
sets the background-color of the li tag

Answer 2

You can fix this problem by deleting
.active {
background-color: orange;
}
This adds it to the a element
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:focus .nav-link,
.navbar-custom .nav-item:hover .nav-link {
color: white;
background-color: orange;
}
And this adds it to the li element
.active {
background-color: orange;
}

Answer 3

It is because of this code
header li {
padding: .5rem;
margin: 0;
}
it is setting the padding of .5 rem to the block.
set your changing values on hover to element itself. For further issues try reading the code of css libraries you are using.