Bootstrap NAVBAR item t on the left of dropdown list - css

Question

this is my code:
<div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm">
App
App
<nav >
{% if user.is_authenticated %}
<a class="nav-link" href="#">Link 1</a>
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{{ user.username }}</a>
<div class="dropdown-menu dropdown-menu-right text-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{% url 'listingfournisseur' %}">Update fournisseur list</a>
<a class="dropdown-item" href="{% url 'updatepayables' %}">Eletronic Payment</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="{% url 'listingclient' %}">Update Clients list</a>
<a class="dropdown-item" href="{% url 'account_logout' %}">Log Out</a>
</div>
</li>
</ul>
{% else %}
<a class="p-2 text-dark" href="{% url 'account_login' %}">Log In</a>
<a class="btn btn-outline-primary" href="{% url 'account_signup' %}">Sign Up</a>
{% endif %}
</nav>
</div>
I m tring to have link1 item just on the left of dropdown.
I don t understand why it is up to dropdown ?
this is what I see:
thanks for help

Answer 1

In you nav add the CSS property display: flex and you will have it one next to the other. But after you will just have to play with the size because an tag don't have "padding" but tag have top, left and bottom "padding".
<nav class="b">
<div>ets</div>
<div><ul>test</ul></div>
</nav>
<style>
.b{
display:flex;
}
</style>