How can the left-padding added by Flexbox on a horizontal list be fixed even with justify-content: space-between?
<div class="list-container">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
</div>
.list-container {
width: 500px;
background-color: darkseagreen;
}
.list-container ul {
display: flex;
justify-content: space-between;
list-style: none;
}
.list-container li {
flex: 0 0 auto;
background-color: darkorange;
}
jsfiddle : https://jsfiddle.net/telemacus/vdo9a54c/10/
To solve the issue, simply add "padding-left: 0" to the "ul".