Navbar列表无法与Village Burger文本水平对齐问题求助

我希望导航列表（navlist）能与“Village Burger”文本水平对齐，但它向下偏移了一段距离，目前看起来和“Certified”文本处于同一行。不清楚偏移的原因，推测可能是Bootstrap默认代码导致的。相关代码如下：

CSS 代码 #

body {
  font-size: 16px;
  color: #fff;
  background-color: indianred;
  font-family: 'Oxygen', sans-serif;
}

#header-nav {
  background-color: #f6b319 !important;
  border-radius: 0;
  border: 0;
}

#logo-img {
  width: 150px;
  height: 150px;
  margin: 10px 15px 10px 0;
  background: url('../images/logo.jpg') no-repeat;
}

.navbar-brand {
  padding-top: 25px;
}

.navbar-brand h1 {
  /*Restaurant name */
  font-family: 'Lora', serif;
  color: #557c3e;
  font-size: 1.5em;
  text-transform: uppercase;
  font-weight: bold;
  text-shadow: 1px 1px 1px #222;
  margin-top: 0;
  margin-bottom: 0;
  line-height: .75;
}

.navbar-brand a {
  text-decoration: none;
}

.navbar-brand a:hover,
.navbar-brand a:focus {
  text-decoration: none;
}

.navbar-brand p {
  /*Kosher*/
  color: #000;
  text-transform: uppercase;
  font-size: .7em;
  margin-top: 15px;
}

.navbar-no-padding {
  padding: 0;
}

#nav-list {
  margin-top: 10px;
}

#nav-list a {
  color: #951C49;
  text-align: center;
}

#nav-list a:hover {
  background: #E7E7E7;
}

#nav-list a span {
  font-size: 1.8em;
}

#phone {
  margin-top: 5px;
}

#phone a {
  /*phone text*/
  text-align: right;
  padding-bottom: 0;
}

#phone div {
  /*We Deliver*/
  color: #557c3e;
  text-align: right;
  padding-right: 15px;
}

HTML 代码 #

<nav id="header-nav" class="navbar navbar-expand-lg navbar-no-padding bg-body-tertiary">
  <div class="container">
    <div class="navbar-header">
      <a class="navbar-brand  " href="test.html">
        <div id="logo-img" class="float-lg-start d-none d-md-block d-lg-block" alt="logo image"></div>
        <div class="navbar-brand">
          <h1>Village Burger</h1>
          <p>
            <img src="images/star.png" alt="Certified">
            <span>Certified</span>
          </p>
        </div>
      </a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span></button>
    </div>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
      <ul id="nav-list" class="navbar-nav ms-auto">
        <!--ms-auto (navbar-right)-->
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">
            <span class="fa fa-cutlery"></span>
            <br class="d-none d-sm-block"> Menu
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link " href="#">
            <span class="fa fa-info"></span>
            <br class="d-none d-sm-block"> About
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link " href="#">
            <span class="fa fa-certificate"></span>
            <br class="d-none d-sm-block"> Awards
          </a>
        </li>
        <li id="phone" class="d-none d-sm-block">
          <a href="tel:038289292">
            <span>038289292</span>
          </a>
          <div>* We Deliver</div>
        </li>
      </ul>
    </div>
  </div>
</nav>

当前显示效果：

恳请各位帮忙解决该问题，谢谢！

内容的提问来源于stack exchange，提问作者seven