Flexbox Issue - spacing oddly and text wrapping unexpectedly

I’m working on the landing page and am finishing up my nav bar. I’m trying to get the list items spaced evenly, and all on one line. Right now it’s spaced unevenly and the “How it works” is wrapping in a way I don’t want. Also, when I try to apply justify-content: space-between; (to hopefully even out the spacing) nothing happens. Any insight into how to fix this and why it’s happening would be much appreciated!

My code: https://codepen.io/kianaml/pen/VRwQzV?editors=1100

Thanks in advance!

I made the changes and added comments on lines #81, #92 and #99 where I made those changes.

Here’s the link: https://codepen.io/anon/pen/wOoQGe?editors=1100

Sorry, I’m poor at explaining CSS. I usually debug CSS issues with browser developer tools to visualize what’s happening. I suggest that you should also use them.

1 Like

the link isn’t working for me - it just keeps loading. Could you describe the changes? And I did figure out that I had to get rid of the flex: 1;, thanks, looking at the lines you pointed out pointed me in that direction.

oh, and i just mean just putting the comments on here!

Did it load now? The link is working for me. If not, I’ll describe the changes here.

yes it worked, thank you!