Bootsrap 4. Why does border-bottom go beyond text?

Question

Bootstrap

Why does border-bottom go beyond text?
Now:

What I need:

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

try margin: 0; padding: 0;