Bootsrap 4. Почему border-bottom выходит за текст?

Question

[When you dont want to litter on stackoverflow]

Почему border-bottom выходит за текст?
Сейчас:

То что мне нужно:

HTML

<nav class="navbar navbar-expand-lg pl-5 pr-4 fixed-top">
		<a class="navbar-brand" href="#">
			<img src="img/logo.png" alt="">
		</a>
		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
			<span class="navbar-toggler-icon"></span>
		</button>
		<div class="collapse navbar-collapse d-flex flex-row-reverse bd-highlight" id="navbarNav">
			<ul class="navbar-nav">
				<li class="nav-item p-1 bd-highlight">
					<a class="nav-link active" href="#">Home</a>
				</li>
      </ul>
		</div>
	</nav>

CSS:

header nav ul li a{
	color:white;
	font-size: 18px;
	font-family: 'Ubuntu', sans-serif;
	letter-spacing: 1px;

}
header nav ul li a.active{
	border-bottom: 2px solid white;
}
header nav ul li a:link,header nav ul li a:visited{
	color:white;
}

Answer 1

[Mark]

попробуй margin: 0; padding: 0;

Comments

[When you dont want to litter on stackoverflow]

Не помогло,( это я пробовал в первую очередь )

[When you dont want to litter on stackoverflow]

Только что повторил попытку, только с !important, помогло, спасибо.