Justify content:space-around not working

hey I was working with flex box but the list items don’t seem to get space between then even after using space-around.
I checked with firefox dev browser that flexbox is made but cant understand why space is not added

https://codepen.io/advitya-sharma/pen/gOaJZgj

The nav-list needs width to have space to distribute. Try giving it say 30% width (or whatever).

this don’t seem to work the whole list got outside the navbar

I changed the width in #navbar > ul and that seems to work

Just to be clear, nav-list is the ul.