Boostrap центр навигационных элементов

Question

Здравствуйте, я хотел бы спросить, как я могу отцентрировать эти вещи: Дом, форум, статистика и т. Д. c .. в центр экрана. Я перепробовал много функций, но ни одна из них не работала на меня. И вторая проблема заключается в том, что кнопка границы фона, когда я указываю на текст, с текстовой кнопкой будет двигаться вправо. экран Спасибо за советы.

.navbar-default {
  background-color: rgb(48, 48, 48);
}

.navbar-nav {
  font-size: 20px
}

.custom-toggler {
  border-color: white;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='-9 0 35 33' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.8)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.nav-tabs>li>a:hover {
  background-color: purple !important;
  border: medium none;
  border-radius: 0;
  color: #fff;
}

.nav-item {
  color: white;
  font-size: 22px;
  display: block;
}

.nav-item:hover {
  border-radius: 12px;
  background: rgb(80, 80, 80);
  padding: 5px;
  width: 100px;
  height: 50px;
}

Answer 1

Чтобы центрировать nav-элемент, используйте класс mx-auto, чтобы выровнять их по центру. Для просмотра вывода откройте результат в новой вкладке (полный экран) Я также перезаписал bootstrap класс .navbar-nav

.navbar-nav {
  font-size: 20px;
  width:75% !important;
  display:flex !important;
  justify-content:space-evenly !important;
  align-items:center !important;
}

.navbar-default {
  background-color: rgb(48, 48, 48);
}

.navbar-nav {
  font-size: 20px;
  width:75% !important;
  display:flex !important;
  justify-content:space-evenly !important;
  align-items:center !important;
}


.custom-toggler {
  border-color: white;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='-9 0 35 33' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.8)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.nav-tabs>li>a:hover {
  background-color: purple !important;
  border: medium none;
  border-radius: 0;
  color: #fff;
}

.nav-item {
  color: white;
  font-size: 22px;
  display: block;
}

.nav-item:hover {
  border-radius: 12px;
  background: rgb(80, 80, 80);
  padding: 5px;
  width: 100px;
  height: 50px;
}