Как задать space-between для пунктов меню Bootstrap?

Беру стандартный код для панели навигации из документации Bootstrap. Выкидываю из него логотип, выпадающий список, формы. Оставляю только кнопку navbar-toggler и собственно список с пунктами меню.

        <nav class="navbar navbar-expand-lg" data-bs-theme="dark">
          <div class="container-fluid">
            <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 active" aria-current="page" href="#">Home</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Link1</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Link2</a></li>
              </ul>
            </div>
          </div>
        </nav>

Полученный результат меня устраивает, за одним исключением: все пункты меню прижаты к левому краю, а надо растянуть на всю страницу. В стилях список является flex-контейнером, но

.navbar-nav {
  justify-content: space-between;
}

на него никак не влияет. Как это поправить?