положение кнопки переключения меняется при нажатии на разные ссылки

Question

Я работаю над созданием панели навигации для моего сайта. Я сталкиваюсь с некоторыми проблемами рендеринга, когда я переключаюсь с одной ссылки на другую в панели навигации. размер кнопки переключения увеличивается, и я не могу найти, в чем проблема. Буду признателен за любую оказанную помощь. Спасибо

HTML код

<nav class=" navbar navbar-expand-sm  navbar-light bg-dark ">


            <div class="container" style="border: 5px solid green">
                <a class="navbar-brand text-white" asp-area="" asp-page="/Index">Mywebsite</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"    
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse">

                    <ul class="navbar-nav mr-auto ">

                        <li class="nav-item">
                            <a class="nav-link text-white " asp-area="" asp-page="/Index">Home</a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link text-white " asp-area="" asp-page="/link1">link1</a>
                        </li>

                        <li class="nav-item">
                            <a class="nav-link text-white " asp-area="" asp-page="/link2">link2</a>
                        </li>
                        <partial name="_LoginPartial" />
                    </ul>
                </div>
            </div>
        </nav>

CSS

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}

.navbar-collapse {
    background-color: #3dc4c4 !important;
    text-align: center;
    width: 20px;
    margin-left: 5rem;
   /*display:block;*/
}

.navbar {
    height: 60px;
    font-size: 10pt;
    font-family: Calibri;
    width: 100%;
}

a.navbar-brand {
  white-space: normal;
  text-align: center;
  word-break: break-all;
}