Bootstrap navbar-right not working on fix-top - css

Question

I want the nav links aligned right of the nav bar. However my nav links are showing up next to the logo on the left. Any ideas?
Here is my code:
<nav class="navbar navbar-expand-md navbar-light fixed-top bg-light white-bg purple-top-strip">
<div class="container">
<a class="navbar-brand" href="#"><img src="images/presitskillsbank-logo.png" width="102" height="40" alt=""/></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse navbar-right" id="navbarCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>

Answer 1

You made some mistakes the way you structured HTML, this would work in bootstrap 3, but in bootstrap 4 it will not.
Here is example of code that would work in bootstrap 4:
<nav class="navbar navbar-light navbar-expand-md bg-faded justify-content-center">
Brand
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar3">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="collapsingNavbar3">
<ul class="nav navbar-nav ml-auto w-100 justify-content-end">
<li class="nav-item">
<a class="nav-link" href="#">Right</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Right</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Right</a>
</li>
</ul>
</div>
</nav>
Here is JSBin with example http://jsbin.com/pagigugelo/edit?output

Answer 2

Here is the working code for your quick reference.
Updated fiddle: https://jsfiddle.net/DTcHh/39316/
.navbar-toggler {
float: right;
margin-top: 10px;;
position: relative;
z-index: 3;
}
.navbar-right {
float: right;
}
.navbar-nav {
margin-top: 20px;
}
.navbar-nav li {
width: 100%;
}