Can't get my nav bar links to spread out

Hello.

I’m trying to get the links in my nav bar to spread out. I thought this would work by applying “display:flex” and “justify-content:space-around” to the “header ul” css selector. But it’s not working. Any help would be appreciated.

The coloured borders are to help me see where everything is.

https://codepen.io/t-lyons/pen/pOwVwx?editors=1100

The problem is that the <ul> element doesn’t take up the whole width of its parent <div> element. You can verify this by adding in a CSS rule of background: red; to the header ul selector.

You can solve the problem by adding a CSS rule of:

width: 100%;

1 Like

Thank you so much. That was driving me mad!