How to move dropdown item to the right end of the page - html

Question

I'm trying to move the language switcher and it's items to the right end of the page. I tried ml-auto but it didn't work.
When I try to move the language picker using padding-left all of its items appear in the center of the page. Any solutions or advices?Here is how my web-page looks like.
.navbar-nav {
margin: 0 auto;
}
.nav-link {
font-weight: 900;
font-size: 1rem;
float: right;
}
#top-nav {
position: absolute;
z-index: 3;
width: 100%;
background-color: transparent !important;
}
#logo {
width: 100px;
height: 50px;
margin-left: 0;
padding-left: 0;
}
.flag-icon {
border-radius: 50%;
}
.navbar-light .navbar-toggler {
color: #FFFFFF;
border-color: #FFFFFF;
}
<nav class="navbar navbar-expand-lg navbar-light bg-light" id="top-nav">
<a class="navbar-brand" id="logo" href="index.html">
<img src="media/logo_light.svg" />
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse " id="navbarNav">
<ul class="navbar-nav">
<li id="main" class="nav-item active ">
<a class="nav-link text-light" href="#">მთავარი<span class="sr-only">(current)</span></a>
</li>
<li id="about-us" class="nav-item">
<a class="nav-link text-light" href="#">ჩვენ შესახებ</a>
</li>
<li id="services" class="nav-item">
<a class="nav-link text-light" href="#">სერვისები</a>
</li>
<li id="contact" class="nav-item">
<a class="nav-link text-light " href="#">კონტაქტი</a>
</li>
<li class="nav navbar-nav nav-item dropdown justify-content-end">
<a class="nav-link dropdown-toggle" href="#" id="dropdown09" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="flag-icon flag-icon-ge"></span></a>
<div class="dropdown-menu" aria-labelledby="dropdown09">
<a class="dropdown-item nav-link" href="#gb"><span class="flag-icon flag-icon-gb"></span></a>
<a class="dropdown-item nav-link" href="#ru"><span class="flag-icon flag-icon-ru"> </span></a>
</div>
</li>
</ul>
</div>
</nav>

Answer 1

Do you want something like this?
.navbar-nav {
margin: 0 auto;
}
.nav-link {
font-weight: 900;
font-size: 1rem;
}
#top-nav {
position: absolute;
z-index: 3;
width: 100%;
background-color: transparent !important;
}
#logo {
width: 100px;
height: 50px;
margin-left: 0;
padding-left: 0;
}
.flag-icon {
border-radius: 50%;
}
.navbar-light .navbar-toggler {
color: #FFFFFF;
border-color: #FFFFFF;
}
.navbar-nav {
float: right;
}
<nav class="navbar navbar-expand-lg navbar-light bg-light" id="top-nav">
<a class="navbar-brand" id="logo" href="index.html">
<img src="media/logo_light.svg" />
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse " id="navbarNav">
<ul class="navbar-nav">
<li id="main" class="nav-item active ">
<a class="nav-link text-light" href="#">მთავარი<span class="sr-only">(current)</span></a>
</li>
<li id="about-us" class="nav-item">
<a class="nav-link text-light" href="#">ჩვენ შესახებ</a>
</li>
<li id="services" class="nav-item">
<a class="nav-link text-light" href="#">სერვისები</a>
</li>
<li id="contact" class="nav-item">
<a class="nav-link text-light " href="#">კონტაქტი</a>
</li>
<li class="nav navbar-nav nav-item dropdown justify-content-end">
<a class="nav-link dropdown-toggle" href="#" id="dropdown09" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="flag-icon flag-icon-ge"></span></a>
<div class="dropdown-menu" aria-labelledby="dropdown09">
<a class="dropdown-item nav-link" href="#gb"><span class="flag-icon flag-icon-gb"></span></a>
<a class="dropdown-item nav-link" href="#ru"><span class="flag-icon flag-icon-ru"> </span></a>
</div>
</li>
</ul>
</div>
</nav>

Answer 2

Try adding a class to your language switcher, navbar-right, that used to work on Bootstrap 3, not 100% sure on Bootstrap 4