Having trouble aligning the two buttons in my bootstrap navbar to the right. Despite using justify-content-end, it doesn't seem to work.
I thought applying d-flex to the container and then justify-content-end to the items would solve the issue, but even after doing so (applying it to the navbar div), it still isn't working.
If you have any ideas, feel free to check out this codepen: https://codepen.io/MH092/pen/xxXwzVY
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand pr-5" href="#">40k QuickLore</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse d-flex pl-1" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class=" nav-item">
<a class="nav-link pr-5" href="#">WTF is 40k</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Imperium
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
// More nav item with similar structure
<nav class="navbar navbar-light">
<form class="form-inline">
<button class="btn btn-outline-success" type="button">RIGHT ME</button>
<button class="btn btn-outline-success" type="button">RIGHT ME</button>
</form>
</nav>