粘性顶部导航栏上方的空格键

Question

我已经创建了一个标题和顶部导航栏的结构。

当我们向下滚动（向上和向下滚动）时，我的标题和导航栏之间总是有一个空格。我们可以看到那个空间中的身体。

Picture of the thin space line in yellow

我看到这来自3个按钮，因为当我们删除它们时，空格消失了，但是我不知道如何解决问题。

有什么主意吗？

Please find my code

谢谢

已解决 问题来自一个类的底部边界。我认为它们不适合父元素。 Code after correction

HTML

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<section>
  <div class="container-fluid bg-danger">
    <div class="row">
      <div class="col-md-6 my-auto">
        <a class="d-flex justify-content-center align-items-center" href="#">
          <h1 class="text-center"><span class="ft-color-1">BRAND NAME</span></h1>
        </a>
      </div>
      <div class="col-md-6 p-2">
        <ul>
          <li>Adress, city</li>
          <li>Ouvert 7/7 de 7h à 21h</li>
        </ul>
        <div class="d-none d-md-flex flex-row mb-2">
          <a class="btn p-1 mr-1 w-100 bg-primary text-left" href="" role="button"> Itinéraire</a>
          <a class="btn p-1 mr-1 w-100 bg-primary text-left" href="" role="button"> Contact</a>
          <a class="btn p-1 mr-0 w-100 bg-primary text-left" href="" role="button"> Suivez-nous</a>
        </div>
      </div>
    </div>
  </div>
</section>

<nav class="navbar navbar-expand-md sticky-top bg-primary" id="navigation-barre">
  <a class="navbar-brand text-white" href="#"> Brand name</a>
</nav>

<section class="bg-warning">
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
</section>