Как переместить выпадающий список в правый конец страницы

Question

Я пытаюсь переместить переключатель языка и его элементы в правый конец страницы. Я попробовал ml-auto, но ничего не вышло. Когда я пытаюсь переместить средство выбора языка с помощью padding-left, все его элементы появляются в центре страницы. Какие-нибудь решения или советы? Вот как выглядит моя веб-страница.

.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;
}

Answer 1

Попробуйте добавить класс к переключателю языка, navbar-right, который раньше работал на Bootstrap 3, не уверен на 100% на Bootstrap 4

Answer 2

Хотите что-то подобное?

.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;
}