Having trouble with the flexbox and need assistance setting up my navbar.
I've written some code to display my logo + title on the left side of the navbar, and a menu of options on the right. However, all items are aligning to the left and the item--4 is not floating over to the right. Any insights?
.flex-container {
background: #eee;
display: flex;
}
.flex-item {
background: orangered;
color: white;
}
.flex-item--4 {
flex-grow: 1;
margin-left: auto;
background: purple;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="583a37372c2b2c2a3928186c766e7669">[email protected]</a>/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="84e6ebebf0f7f0f6e5f4c4b0aab2aab5">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<div class="flex-container">
<div class="flex-item">
<a class="navbar-brand" style="padding-left: 20px;" href="{% if user.is_staff or user.is_superuser %}{% url 'admin:index' %}{% else %}{% url 'app:home' %}{% endif %}">
<img src="{% static 'img/bootstrap-solid.svg' %}" width="21" height="21" alt="Logo" class="mr-2 mt-n1"> Title
</a>
</div>
<div class="flex-item--4">
<div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Hello {{ request.user.get_full_name|default:request.user }}!
</a>
<ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
<li><a class="dropdown-item" href="#">About</a></li>
<li><a class="dropdown-item" href="#">Account</a></li>
<li><a class="dropdown-item" href="#">Settings</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="{% url 'account:logout' %}"> Sign Out</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>