Выравнивание элементов панели навигации

У меня странный глюк, при котором элементы Navbar не выравниваются по центру (предварительный просмотр Navbar)

Я пытался исправить это вручную, добавив margin и padding, но у меня ничего не получилось из-за отсутствия знаний Bootstrap

#cart-icon{
    width:25px;
    display: inline-block;
    margin-left: 15px;
    margin-right: 20px;
}

#cart-total{
    display: block;
    text-align: center;
    color:#fff;
    background-color: red;
    width: 10px;
    height: 25px;
    border-radius: 50%;
    font-size: 14px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="{% url 'store' %}"> Luffy </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">
      <a class="nav-item nav-link active" href="#">Store</span></a>
    </div>
  </div>
  <div class="form-inline my-2 my-lg-0 mr-auto">
   <a href="#"class="btn btn-warning">Login</a>
   <a href="{% url 'cart' %}">
    <img  id="cart-icon" src="https://stepswithcode.s3-us-west-2.amazonaws.com/m1-prt4/6+cart.png">
    <p id="cart-total">0</p>
   </a>
  </div>
</nav>

как я могу это исправить?

У вас есть пара мелочей, которые работают вместе, вызывая нежелательное позиционирование элементов навигации. Во-первых, позиция #cart-total должна быть position: absolute, чтобы она отображалась поверх иконки, а не снизу, что смещает элементы навигации. Вы также должны установить высоту .navbar так, чтобы она давала достаточно места для правильного расположения итоговой корзины, используя top: и right:

#cart-icon{
    width:25px;
    display: inline-block;
    margin-left: 15px;
    margin-right: 20px;
}

#cart-total{
    display: block;
    text-align: center;
    color:#fff;
    background-color: red;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    font-size: 10px;
    /*right here*/
    position: absolute;
    top: 28px;
    right: 20px;
}
/*And here*/
.navbar {
  width: 100%;
  height: 90px;
  

}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="{% url 'store' %}"> Luffy </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">
      <a class="nav-item nav-link active" href="#">Store</span></a>
    </div>
  </div>
  <div class="form-inline my-2 my-lg-0 mr-auto">
   <a href="#"class="btn btn-warning">Login</a>
   <a href="{% url 'cart' %}">
    <img class="logo" id="cart-icon" src="https://stepswithcode.s3-us-west-2.amazonaws.com/m1-prt4/6+cart.png">
    <p id="cart-total">0</p>
   </a>
  </div>
</nav>

Вернуться на верх