Как убрать отступ / отступ слева в bootstrap навигации?

Question

Я пытаюсь центрировать bootstrap панель навигации. Проблема в том, что я не могу удалить отступы по умолчанию или поля слева. Я пробовал с разными классами, но ничего не работает, как я хочу. Элементы навигации должны быть идеально отцентрированы. Это мой HTML & CSS, вы можете его не видеть, но элементы навигации немного сдвинуты слева.

body 
{
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
}

/* Header Start */

header
{
    display: flex;
    height: 10rem;
    align-items: center;
    justify-content: center;
}

nav ul li 
{
    padding-left: 10px;
    padding-right: 10px;
}

nav 
{
    font-size: 21px;
}

#logo img 
{
    height: 220px;
}

/* Header End */

/* Navigation Start */

/* Navigation End */

/* Main Start */

/* Main End */

/* Aside Start */

/* Aside End */

/* Footer Start */

/* Footer End */

/* Media Queries Start */

/* Media Queries End */

Answer 1

Я думаю, ваша навигация идеально центрирована. Я попытался визуализировать на изображении ниже расстояния до границы страницы. Цветные поля всегда имеют одинаковую ширину.

Как видите, тег <ul>, содержащий три элемента навигации, хорошо отцентрирован. Тем не менее, пункт списка для «Статьи» не является. Это потому, что навигация сосредоточена как один элемент.

Выравнивание внутри навигации может быть достигнуто путем назначения значения c с для каждого элемента навигации (<li>). Я бы порекомендовал обновить одно из ваших css правил:

nav ul li {
  padding-left: 10px;
  padding-right: 10px;
  width: 200px;
  text-align: center;
}

Если вы хотите адаптировать ширину ваших элементов к самому широкому элементу, присутствующему в вашем списке, оформите this StackOverflow пост.