Bootstrap Navbar not lining up with eachother-CodePudding

So, i have a bootstrap navbar with items in it, but for some reason they don't line up with the first item.

You see how the items at the right aren't really lined with with the logo and the image.

Code:

<nav  style="background-color: rgb(0, 0, 0);">
    <a  href="/">
      <img  src="/static/img/AdiAvi.png" width="30" height="30"  alt="">
      AdiAvi
    </a>
    <button  type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span ></span>
    </button>
    <div  id="navbarNav">
      <ul >
        <li >
          <a {% if homePage %}  {% endif %} {% if dashboardPage %}  {% endif %}   href="/">Home</a>
        </li>
        <li >
          <a {% if contactPage %}  {% endif %}  href="/contact">Contact</a>
        </li>
        {% if baseTemplate %}
        <button type="button" id="loginButton" >
          Login
      </button>
        {% endif %}
        {% if baseTemplate %}
        <button type="button" id="registerTrigger" >
            Register
        </button>
        {% endif %}
        {% if name %}
        <li >
          <a  href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <img src="/static/profilePictures/A.png" width="50" height="50" >
          </a>
          <div  aria-labelledby="navbarDropdownMenuLink">
            <a  href="/dashboard">Dashboard</a>
            <a  href="/account">Edit Profile</a>
            <a  href="/logout">Log Out</a>
          </div>
        </li>
        {% endif %}   
      </ul>
    </div>
  </nav>

CSS:

.rounded-circle {
    border-radius: 24px;
}
.mt-8  {
  margin-top: -8!important;
}

I tried giving all the atributes the class ms-3, because i gave the logo that class and it lined up like that, so i was guessing that would be the right thing to do, but nothing really happened at all. Can anyone help me with this problem?

CodePudding user response：

This should work. You could also utilize the bootstrap classes (d-flex, justify-content-center, align-items-center).

.nav-item {
  display:flex;
  align-items: center;
  justify-content:center;
}