Как увеличить расстояние между li списком расположенном горизонтально?

Question

[cehka]

У меня есть контейнер, допустим header-nav, который сам находится в header вместе с header-logotype. В нём находится 6 li элементов, которые находятся в горизонтальном положении, так как у header стоит правило display:flex . Как увеличить расстояние между словами в списке? padding и margin не помогает.

Comments

[Ankhena]

У меня есть контейнер...

Может у вас еще и код от этого есть?
Вот сюда его -> jsfiddle.net или аналог

[cehka]

Ankhena, jsfiddle.net/m4ndhz51/1

Answer 1

[Матвей Феникс]

Например так:

.header-nav a {
   margin: 0 10px;
}

Comments

[cehka]

Спасибо, помогло. Только я не понимаю. Почему если я у header-nav это укажу, ничего не работает, но если у header-nav a - работает, не объясните?

[Матвей Феникс]

cehka, потому что блок header-nav это не то место, где нам нужно сделать отступы. Если ты просто к этому блоку добавишь отступы - то они появятся с боков от этого блока, а не между ссылками. Поэтому я пишу - добавь отступы между тегами а, которые лежат в блоке header-nav.

[Артур Боссов]

a{
display: inline-block;
}

и margin должен тогда сработать

Answer 2

[Jumandjilos]

поработай со свойством justify-content

Comments

[Nebritbij]

justify-content не будет работать если не задать ширину родительскому блоку больше чем дети занимают