Почему мой активный ли больше, чем ливень?

Question

Я использую Bootstrap 4 и создал простую навигационную панель ( здесь CodePen ).Моя активная жизнь выглядит так, как мне нравится, с квадратным оранжевым фоном.Тем не менее, когда я наводю курсор мыши на другие li, они: hover не такие высокие.

Я хочу, чтобы зависания были такими же, как у активного - оранжевого цвета и того же размера.Я использовал инспектора, чтобы попытаться выяснить, откуда исходит калибровка, но не могу найти ничего, что его меняет.Как мне это исправить?

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

Вы можете решить эту проблему, удалив

.active {
    background-color: orange;
}

Это добавит его к элементу a

.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;
}

И это добавит его к элементу li

.active {
    background-color: orange;
}

Answer 2

Именно из-за этого кода

header li {
padding: .5rem;
margin: 0;
}

это установка отступа .5 rem для блока.установите изменяющиеся значения при наведении на элемент.Для дальнейших проблем попробуйте прочитать код библиотек css, которые вы используете.

Answer 3

Из вашего кода CSS

.navbar-custom .nav-item:hover .nav-link

вы устанавливаете цвет фона на оранжевый nav-link, который является тегом anchor

В то время как эта строка

.active {
    background-color: orange;
}

устанавливает цвет фона тега li