How to space padding evenly among menu links?

I want the left and right padding (the green area) of each link to be equal regardless of how much text I put into the links. We can assume the width of the whole menu (between the yellow borders) is fixed, either in pixels or in ems, but the client can change the names of the menu links. If the text changes then the width of the links also changes and I would like the horizontal paddings to be always evenly distributed with css alone. How can this be done?

So far I've tried applying display: table-cell to the <li> elements and while the whole menu was filling the whole width the browsers didn't keep equal paddings - the paddings of links with more text were much wider than those with little text. As a temporary solution I set fixed width to some of the menu items but this is far from how it should be.
Please Help !
Thanks !
I didn't find the right solution from the internet.
References:
- https://www.sitepoint.com/community/.../2747099784651
- Case study example