Need help in understanding flex-items

[jovial moon]

I'm wondering why the blue colored boxes does not start from the beginning. I have added flex-start to the parent. I need help to understand how that works. Thanks

https://scrimba.com/scrim/cgWQRes7

[normal mortar]

Hey @jovial moon ,
The reason why it's not flushed to the left side is because ul has default padding. Set ul {padding:0} and you'll see a change.

Now, after doing this, you want to harmonize the size of you li. First, reduce the padding on li to padding: 10px, so we can see what is happening.
Then, give them flex: 1
Flex: 1 is a shorthand property. Here, it basically means: you, child element, take as much space as you can on your row while fitting as many elements as you can.
Now, you can remove flex-start on the parent as it's now useless.
https://scrimba.com/scrim/coab143b7a3b9826db3cd96d1