Navbar-Expand-MD有点小问题。从768px到992px，导航栏的高度增加，导航栏的品牌被推了一点。这是一个小问题，但它真的困扰着我，我似乎无法解决这个问题。我的技能不是很熟练，所以我已经是一头雾水了，希望能得到任何帮助。提前感谢-节日快乐，身体健康。

上面描述的问题可以在这里看到:

https://jsfiddle.net/w3do6z74/

导航条码:

<nav class="navbar navbar-expand-md navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">brandname</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link" href="#"><img src="imgs/category_bar_history.png" class="category-bar">History</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#"><img src="imgs/category_bar_nature.png" class="category-bar">Nature</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#"><img src="imgs/category_bar_travel.png" class="category-bar">Travel & Food</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#"><img src="imgs/category_bar_arts.png" class="category-bar">Arts</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#"><img src="imgs/category_bar_science.png" class="category-bar">Science</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#"><img src="imgs/category_bar_crime.png" class="category-bar">Crime</a>
        </li>
        <li class="nav-item">
          <a class="nav-link nav-custom-link" href="#">HYPE</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

自定义CSS:

.nav-custom-link {
  font-weight: bold;
  font-style: italic;
}

.navbar {
  border-bottom: 1px solid black;
  margin-bottom: 12px;
  padding-top: 5px;
  padding-bottom: 5px;
}

.navbar-brand {
  font-family: 'Audiowide', cursive;
}

.category-bar {
  padding-right: 4px;
}

.navbar-toggler {
  padding: 0.2rem 0.55rem;
  font-size: 1.1rem;
 }

.navbar-toggler:focus {
  box-shadow: 0 0 0 0;
}