css - how to position <li> in horizontal <ul>? - html

Question

I have section, which contains horizontal ul, which contains four li's,
as following:
#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>
Requirements:
- first item at left with some small percentage offset of screen edge
- second item centered in the middle
- third item to be at right, with some percentage space between to fourth
- fourth item at right, with percentage offset from screen edge
I am able to position li's with basic justify-content: space-between;, but don't know how to position it the custom way.
It should look like this:

Answer 1

Simply change the margin of the second element and make it auto
As a side note: with flexbox you don't need to worry about whitespace and no need to define element as 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>

Answer 2

if you are using 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;
}