La clase de bootstrap para flotar a la derecha no funciona. El botón no responde.

Actualmente estoy practicando algunas cosas en expressJS y renderizado EJS. Me di cuenta de que la clase float-right de Bootstrap no funciona en la barra de navegación. Incluso intenté con d-flex pero el resultado sigue siendo el mismo. No sé si estoy haciendo algo mal. A continuación está mi código:

_header.ejs

<header>
  <nav class="navbar navbar-expand-md navbar-dark bg-success">
    <a class="navbar-brand" href="/urls">TinyApp</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li class="nav-item">
            <a class="nav-link" href="/urls">URLs</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="/urls/new">Nueva URL</a>
          </li>
        </ul>
        <li class="flaot-right">
          <button class="btn btn-outline-danger me-2">
            Cerrar sesión
          </button>
        </li>
      </div>
    </div>
  </nav>
</header>

Este es el botón que intenté flotar a la derecha:

<li class="flaot-right">
    <button class="btn btn-outline-danger me-2">
        Cerrar sesión
    </button>
</li>

No cambia nada.