How to move navbar items at the right [duplicate] - html

Question

This question already has answers here:
Bootstrap align navbar items to the right
(24 answers)
Closed 3 years ago.
I'm using bootstrap classes and I need the logo to be in the left but nav items at the right.
To be responsive as well.
https://imgur.com/zL8LrTG
navbar now
<!-- Logo -->
<a class="navbar-brand" href="#">
<img class="img-fluid" src="images/header-logo.png" alt="logo">
</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Nav items -->
<div class="collapse navbar-collapse" id="collapsibleNavbar"> <!-- Collapse navbar -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>

Answer 1

You can add ml-auto to your ul class, which gives your ul a margin-left of auto. It will look like this:
<ul class="navbar-nav ml-auto">

Answer 2

You can use float right to move nav bar right side
#collapsibleNavbar{
float: right;
margin: 0 10px 0 0;
}

Answer 3

You can try this:
// CSS code
nav #collapsibleNavbar{
width: n%; // n = o que achar melhor
margin: n n;
display: block;
}
nav #collapsibleNavbar .navbar-nav{
display: block;
width: auto; // or what You think is better for your project
margin: n n;
float: right;
}
I think you can try that and to encapsulate in a div your Logo and Toggler/collapsibe Button, setting div to float left. Maybe you'll need add some "!important".