Bootstrap 4 nav-bar vertical-align issue - css

Question

Here is a code for my navbar:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="/">BRAND</a>
<div class="navbar-collapse">
<ul class="navbar-nav mr-auto">
{% if user.is_authenticated %}
<li class="nav-item">
<a class="nav-link" href="#">ITEM 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ITEM 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ITEM 3</a>
</li>
{% endif %}
</ul>
<ul class="navbar-nav ml-auto">
{% if user.is_authenticated %}
<li class="nav-item">
<p class="navbar-text">Logged in as:</p>
</li>
<li class="nav-item">
<a class="nav-link" href="/logout">Logout</a>
</li>
{% else %}
<li class="nav-item">
<a class="nav-link" href="/login">Login</a>
</li>
{% endif %}
</ul>
</div>
</nav>
And here is my .css file for paddings, and I am guessing that something has to be added here, but I can't figure out what..
#media (min-width: 992px) {
.navbar-nav > .nav-item {
padding-right: 1.5rem;
}
}
#media (min-width: 992px) {
.navbar-brand {
padding-right: 2rem;
}
}
What happens is this:
Wrong alignment
What do I need to do, to get the right side of the navbar to verically align with other items? I have tried to include style="vertical-align:middle to the .css file and to nav-item and nav-link, but it doesn't help.

Answer 1

there is problem with P tag which has text 'Logged in As'.
P tag has margin bottom which is creating problem with alignment.
so you can remove that margin using mb-0 class.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="/">BRAND</a>
<div class="navbar-collapse">
<ul class="navbar-nav mr-auto">
{% if user.is_authenticated %}
<li class="nav-item">
<a class="nav-link" href="#">ITEM 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ITEM 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ITEM 3</a>
</li>
{% endif %}
</ul>
<ul class="navbar-nav ml-auto">
{% if user.is_authenticated %}
<li class="nav-item">
<p class="navbar-text mb-0">Logged in as:</p>
</li>
<li class="nav-item">
<a class="nav-link" href="/logout">Logout</a>
</li>
{% else %}
<li class="nav-item">
<a class="nav-link" href="/login">Login</a>
</li>
{% endif %}
</ul>
</div>
</nav>