Bootstrap 4: проблемы с выравниванием по центру меню Navbar

Question

У меня есть следующий код на веб-странице, которую я разрабатываю с помощью начальной загрузки:

<nav class="navbar navbar-expand-md bg-dark navbar-dark fixed-top justify-content-center">
  <a class="navbar-brand" href="#">Banana APInf</a>

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Dashboard</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">APIs</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Organizations</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Add APIs</a>
      </li>
    </ul>
  </div>
</nav>

Ссылка, которую я взял, взята из школы w3. Я попытался добавить следующие настроенные CSS в отдельный файл style.css

    #collapsibleNavbar {
  text-align: center !important;
}

Но по какой-то причине логотип и меню выглядят выровненными по левому краю на больших экранах. На экранах размером с планшет или меньшие размеры значок и логотип гамбургера отображаются по центру. Также содержимое меню гамбургера выровнено по центру на маленьких экранах. Я пытался переопределить классы коллапс и навигация коллапсом по центру выровненных текстов, но это не помогло.

Может кто-нибудь помочь мне здесь? Благодарю.