Align right bootstrap navbarsupportedcontent - html

Question

I've tried multiple ways of placing the different supported content of my navbar at the right of the screen, but they keep sticking left next to the logo.
Does someone have an idea why...
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="icone.png" width="38" height="30" class="d-inline-block align-top"
alt="sharkstein"> Sharkson & Vonstein
</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto" id="navbarSupportedContentList">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)
</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="blog.html">Blog</a>
</li>
</div>
</nav>
And the css, I've tried with SupportedContentList also and with class
#navbarSupportedContent {
display: inline-block;
margin-right: auto;
float: right;
text-align: right;
}

Answer 1

You can do it with Flexbox:
body {margin: 0}
.navbar {
display: flex; /* displays flex-items (children) inline */
justify-content: space-between; /* children are evenly distributed, first child is on the left and last child on the right side */
}
ul {list-style: none}
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#"><img src="icone.png" width="38" height="30" class="d-inline-block align-top" alt="sharkstein">Sharkson & Vonstein</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto" id="navbarSupportedContentList">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="blog.html">Blog</a>
</li>
</ul>
</div>
</nav>

Answer 2

Sharkson & Vonstein
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto" id="navbarSupportedContentList">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home
<span class="sr-only">
(current)
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="blog.html">Blog</a>
</li>
</div>
The .mr-auto adds an automatic margin to the right side of the containing div Therefore it will always stick to the left side of the navbar.
If you want to push your content to the right you can use ml.auto. It will automatically add a margin to the left, which will always keep your content on the right side of the navbar.