CSS - как позиционировать <li>в горизонтальном <ul>?

Question

У меня есть section, который содержит горизонтальный ul, который содержит четыре li, как показано ниже:

#header-strip ul {
    display: flex;
    justify-content: space-between;
    margin: 0;
    padding: 0;
    height: 4vh;
    width: 100%;
    background-color: grey;
    list-style-type: none;
}

#header-strip li {
  display: inline;
}

<section id="header-strip">
    <ul>
      <li>meant to be left</li
      ><li>meant to be centered</li
      ><li>meant to be just before last</li
      ><li>meant to be right</li
      >
    </ul>
  </section>

Требования:
- первый элемент слева с небольшим процентным смещением края экрана
- второй элемент по центрусредний
- третий элемент справа, с некоторым процентным интервалом от четвертого
- четвертый элемент справа, процентное смещение от края экрана

Я могу расположить li 's с базовым justify-content: space-between;, но не знаю, как правильно его расположить.

Это должно выглядеть так:

Answer 1

, если вы используете flexbox:

<section id="header-strip">
    <ul>
      <li>meant to be left</li
      ><li class="fill">meant to be centered</li
      ><li>meant to be just before last</li
      ><li>meant to be right</li
      >
    </ul>
  </section>

// css

.fill {
    flex-grow: 2;
}

Answer 2

Просто измените поле второго элемента и сделайте его auto

В качестве примечания: с flexbox вам не нужно беспокоиться о пробелах и не нужно определять элемент как inline

#header-strip ul {
  display: flex;
  margin: 0;
  padding: 0;
  color:#ffff;
  width: 100%;
  background-color: grey;
  list-style-type: none;
}

#header-strip li {
 margin:0 2%;
}

#header-strip li:nth-child(2) {
  margin: auto;
}

<section id="header-strip">
  <ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>

  </ul>
</section>