То же поле с обеих сторон, по-прежнему не выглядит по центру

Question

Пытаюсь установить навигационную полосу по центру, но в то же время она выглядит ближе к левой стороне, чем к правой.

Я даю ей ширину и половину оставшейся в качестве левого бокового поля, но нене изменить.Я оставляю отступы элементов равными 0, если это может повлиять, и то же самое касается отступов.У кого-нибудь есть идея, если есть элемент с полем, на который я не рассчитываю?Спасибо

nav{
    display: block;
    width: 50%;
    padding: 0;
    margin-left: 25vw;
    margin-top: 5vh;
    margin: auto;
}

Answer 1

Вы близки к решению.Сначала укажите поле после margin-XXX, переопределяя его.Решение состоит в том, чтобы сохранить margin-top и добавить оба поля margin-left и margin-right для auto.

Примечание: для демонстрации я установил границу для навигации, чтобы ее можно было видеть по центру;Кроме того, я центрировал текст в навигационной панели по эстетическим причинам.

nav{
    display: block;
    width: 50%;
    padding: 0;
    /*margin-left: 25vw;*/
    margin-top: 5vh;
    margin-left: auto;
    margin-right: auto;
    border: solid 1px red;
    text-align: center;
}

<nav>
navigation menu
</nav>

Answer 2

Я бы порекомендовал использовать flex box для этой цели. Вам понадобится такой внутренний элемент:

nav {
  width: 100%;
  display: flex;
  justify-content: center;
  background-color: #ededed;
}

.inner {
  background-color: #ccc;
  width: 50%;
  text-align: center;
}

<nav>
  <div class="inner">
    Hello world!
  </div>
</nav>