Placing links equidistantly from each other on navigation bar

HTML-CSS
1

Hello felow campers!

It looks like I’m a bit stuck with my attempts to decently style navigation bar on my product landing page project on FCC. Perhaps some of you will have an idea on why my navigation links are skewed to the left and how to fix it. I will be greatful for new leads and explanations on this subject. Perhaps I’m trying the wrong set of tools here.
The pen in question can be found using this link: https://codepen.io/SM_Georg/pen/BOKvOW
This is just a playground to find out the correct approach for this project.
I used to try this ideas: https://css-tricks.com/equidistant-objects-with-css/ but they dont seem to work for my page for some reason.
I tried adding padding-left: 10% to item1, but I think this is a crude one. There must be a way to scale it autimatically.

2

Update: for some reason, when I turned text into actual links they seem to stand equidistantly. Do you know why?
https://codepen.io/SM_Georg/pen/bxwxvE

3

That’s what navigation means, it contain hyperlinks that takes to external page or internal sections, you should definitely have a link if you want to navigate anywhere.

And also it doesn’t stand equidistantly in a formal way, look at this,

Screenshot%20from%202018-08-30%2000-54-21
Screenshot%20from%202018-08-30%2000-54-211366×768 388 KB

Why did you add empty anchor tags with class nav-link ??
And why did you add empty <nav></nav> at the end after link5 ??

Try removing the above mentioned empty elements, and add align-items:center to your .nav, so that those extra white space will be removed, that’s how flex works, and now your code may look cleaner