как убрать перенос текста на другую строку?

Использую навбар бутстрапа.И изначально navbar такой.Но при сужение сайта происходит такое:

вот весь код который связан с навбаром:

html :

  <header>
    <nav class="navbar navbar-expand-lg navbar-light bg-dark bg-colour">
      <div class="container-fluid">
        <a class="navbar-brand" href="#"><img src="..." alt="" width="65px"></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 class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link" href="#">Головна</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Товари та послуги</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Про нас</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Контакти</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Доставка й оплата</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Информація для дилерів</a>
            </li>
            <!-- <li>
              <a href="#"><img src="images/корзина.png" alt="..."></a>
            </li> -->
          </ul>
        </div>
      </div>
    </nav>
  </header>

css :

.nav-item {
    padding-left: 1em;
    padding-top: 0.5em;
    /* padding-right: 1em; */
    margin-right: 1em;
}

.navbar-nav {
    padding-bottom: 1em;
}

.navbar {
    border-bottom: 2px solid red;
}