I've been struggling to get my nav-items in my ul to float right. Despite trying various methods, including those outlined in this comprehensive answer: Bootstrap 4 align navbar item to the right
Unfortunately, the nav item remains stubbornly stuck on the left.
It's starting to feel like I'm overlooking something obvious here. The recently added div class that wraps the list items doesn't appear to have any impact on the behavior of the list item. Just to clarify, all my attempts so far have been made without these div tags.
Is there something glaringly wrong that anyone can spot in my code?
.navbar-default {
background-color: white;
}
.navbar {
display: flex;
min-height: 50px;
border-bottom: 1px solid black;
align-items: center;
margin-bottom: 0;
}
.profile-dropdown {
border-radius: 50%;
height: 50px;
width: 50px;
border: 1px solid black;
object-fit: cover;
}<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<a class="navbar-brand" href="#">Equilibrium</a>
<!-- If the user is logged in, display a profile icon. -->
<ul class="nav navbar-nav mr-auto">
<li class="nav-item">
<a>
<img src="" class="profile-dropdown" alt="">
</a>
</li>
<li class="nav-item" >
<img src="/assets/glyphicons/user.png" class="profile-dropdown" alt="">
</li>
</ul>
</nav>I would really appreciate any assistance with this issue. Thank you.