Как удалить черные точки с правой стороны элементов навигации в моей панели навигации bootstrap 5?

У меня есть навигационная панель bootstrap 5, и все работает хорошо, за исключением того, что все элементы навигации имеют черную точку в правой части текста.

Вот код этого раздела. Я пытался изменить такие вещи, как аргументы и даже прокомментировать css и javascript, но пока не нашел ключ.

<nav class = "navbar navbar-expand navbar-dark fixed-top">
      <div class = "container-fluid">
          <a class = "navbar-brand" href = "/">Correlator 2</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 fs-5">
                      <a class = "nav-link active" aria-current = "page" href = "/">Home .</a>
                  </li>
                  <li class = "nav-item fs-5">
                      <a class = "nav-link" href = "/admin/">Admin Pages .</a>
                  </li>
                  <li class = "nav-item fs-5 dropdown">
                      <a class = "nav-link dropdown-toggle" href = "#" id = "navbarDropdown" role = "button"
                          data-bs-toggle = "dropdown" aria-expanded = "false">
                          Dropdown
                      </a>
                      <ul class = "dropdown-menu" aria-labelledby = "navbarDropdown">
                          <li><a class = "dropdown-item" href = "#">Action</a></li>
                          <li><a class = "dropdown-item" href = "#">Another action</a></li>
                          <li>
                              <hr class = "dropdown-divider">
                          </li>
                          <li><a class = "dropdown-item" href = "#">Something else here</a></li>
                      </ul>
                  </li>
                  <li class = "nav-item fs-5">
                      <a class = "nav-link disabled" href = "#" tabindex = "-1" aria-disabled = "true">Disabled</a>
                  </li>

              </ul>

              <form class = "d-flex">
                  <input class = "form-control me-2" type = "search" placeholder = "Search" aria-label = "Search">
                  <button class = "btn btn-outline-primary" type = "submit">Search</button>
              </form>

              <li class = "nav-item dropdown notification-section">
                  <a href = "#" class = "notification dropdown-toggle" id = "navbarDropdown" role = "button"
                      data-bs-toggle = "dropdown" aria-expanded = "true">
                      <span><i class='fa fa-bell'></i></span>
                      <span class = "badge" id = "notification-badge">0</span>
                  </a>
                  <ul class = "dropdown-menu" aria-labelledby = "navbarDropdown" id = "notifications-dropdown"
                      data-popper-placement = "bottom-end"
                      style = "position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate3d(-70px, 42px, 0px);">
                      
                      {% for i in notifications %}
                      <li class = "dropdown-item">{{i.message}}</li>
                      <hr class = "dropdown-divider">
                      {% endfor %}
                      {% comment %} <li class='dropdown-item'>Hello</li>
                      <hr class = "dropdown-divider"> {% endcomment %}
                      
                  </ul>
              </li>

              <div class = "flex-shrink-0 dropdown" style = "margin-right: 20px">
                  <a href = "#" class = "d-block link-dark text-decoration-none dropdown-toggle show" id = "dropdownUser2"
                      data-bs-toggle = "dropdown" aria-expanded = "true">
                      <img src = "{% static 'mike-oliver.jpg' %}"" alt = "MO" width = "50" height = "50"
                          class = "rounded-circle">
                  </a>
                  <ul class = "dropdown-menu text-small shadow" aria-labelledby = "dropdownUser2"
                      data-popper-placement = "bottom-end"
                      style = "position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate3d(-110px, 50px, 0px);">
                      <li><a class = "dropdown-item" href = "#">New project...</a></li>
                      <li><a class = "dropdown-item" href = "#">Settings</a></li>
                      <li><a class = "dropdown-item" href = "#">Profile</a></li>
                      <li>
                          <hr class = "dropdown-divider">
                      </li>
                      <li><a class = "dropdown-item" href = "#">Sign out</a></li>
                  </ul>
              </div>

          </div>
      </div>

Вот результирующий дисплей, я только что показал самые левые элементы навигации, но все они имеют одинаковые черные точки.

Как убрать эти черные точки?