Bootstrap 4 Button to the right issue - html

Question

I'm new to Bootstrap 4 and I'm designing a very simple page using Bootstrap 4. I created a NAV where I need a logo and company name to the left (this is working) and I need two button to the right of the NAV. I've found many suggestion in forums, but none seem to work for me. I'm stuck.
This is my HTML code:
<nav class="navbar bg-avesta-blue">
<div class="row">
<div class="col-sm-12">
<a class="navbar-brand text-light" href="#">
<img src="images/header-logo.png" class="float-left d-inline-block align-top pr-3" alt="">
<h3 class="pt-1">
AVESTA
</h3>
</a>
<div class="float-right text-right">
<a class="btn btn-success btn-lg text-light"><i class="fa fa-usd"></i> Sell Miles</a>
<a class="btn btn-success btn-lg text-light"><i class="fa fa-usd"></i> Sell Miles</a>
</div>
</div>
</div>
Here is what it looks like right now:
As you can see, both buttons are aligned to the left. I need them to the right.

Answer 1

The Navbar has supported content, and the grid row>col aren't designed to be used inside the Navbar. Read and follow the documentation.
When you use .row inside the flexbox Navbar it will not be full-width as usual and will "shrink" to the left side. You can set w-100 to make the row full-width, but the better approach is to use the supported Navbar content as intended.
"Use our spacing and flex utility classes for controlling spacing and
alignment within navbars"
https://www.codeply.com/go/Ce7CVrR5rZ
<nav class="navbar bg-avesta-blue">
<a class="navbar-brand text-light" href="#">
<img src="images/header-logo.png" class="float-left d-inline-block align-top pr-3" alt="">
<h3 class="pt-1">
AVESTA
</h3>
</a>
<div class="ml-auto">
<a class="btn btn-success btn-lg text-light"><i class="fa fa-usd"></i> Sell Miles</a>
<a class="btn btn-success btn-lg text-light"><i class="fa fa-usd"></i> Sell Miles</a>
</div>
</nav>
Once you have the correct Navbar structure, alignment can be done using auto-margins or flexbox utilities as explained in the other related questions