ользую Bootstrap 4 и устанавливаюnavbar-brand к центру и все элементы на правой стороне. Я хочу установить мойnav элемент нижеnavbar-brand.

Кроме того, я хочу установить «логин» и «выйти» с правой стороныnav, но используяmr-auto не работает

HTML:

<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
  <a href="#" class="navbar-brand">Academind</a>
  <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarMenu">
          <span class="navbar-toggler-icon"></span>
      </button>
  <div class="collapse navbar-collapse" id="navbarMenu">
    <ul class="navbar-nav  ">
      <li class="nav-item ">
        <a href="#" class="nav-link">Users</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Products</a>
      </li>
    </ul>
    <ul class="navbar-nav  mr-auto ">
      <li class="nav-item ">
        <a href="#" class="nav-link">Login</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Log out</a>
      </li>
    </ul>
  </div>
</nav>

CSS:

@media (min-width: 768px) {
  .navbar-brand {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
}