为什么我的 Bootstrap 4 NavBar 在右侧给了我一个空白区域？

Question

请参考图片。此外，当进入不同的设备视图（如移动设备和平板电脑版本）时，空白不存在。就在全屏网页上，我得到了这个错误。

/**** Nav Bar elements**/

.navbar{
    z-index: 1;
    width: 100%;
    margin: 0;
}
.navbar-default{
  background-color: rgb(206, 206, 206) !important;
}
.navbar-brand{
    font-family: "Luckiest Guy", cursive;
    padding-left: 30px;
}
.nav-link{
    font-family: "Luckiest Guy", cursive;
}
.navbar .navbar-brand:hover {
    color: #971491;
}

.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .nav-link:hover {
    color: #971491;
}


.bg-light {
    color: rgb(206, 206, 206);
}

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="index.html">Match-The-Tech</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="ml-auto navbar-nav">
      <a class="nav-item nav-link active" href="index.html" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">How to Play <i class="fas fa-question"></i> <span class="sr-only">(current)</span></a>
      <br>
      <a class="nav-item nav-link" href="card.html" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">Play Game <i class="fas fa-play"></i></a>
      <br>
      <a class="nav-item nav-link" href="settings.html" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">Settings <i class="fas fa-cog"></i></a>
    </div>
  </div>
</nav>

space in top right corner

Answer 1

在.navbar 类中使用position: absolute;。并放一些其他必要的东西。

.navbar{
    z-index: 1;
    width: 100%;
    margin: 0;
    position: absolute;
    left: 0;
    top: 0;
}