How do I get navigation links on the right side of the header and with more space between each link? I’m trying to figure it out.
I think this link will help you out here: https://www.w3schools.com/css/css_navbar.asp
As I can see from the Codepen you provided, you tried to use “float: right” in your
<nav>, however your
<header> is using “display: flex”, which is making your float property to be ignored.
What you could use is the “justify-content” property of Flex in your
<nav> to align it to the right, as you wish.
That, for instance, would align the
<img> to the left and the
<nav> to the right.
I found this nice article where you can read more about flex:
About spacing between each link, you could add some margin or padding to each
<a> element inside your
Hope it helps!
You can give the
margin-left: auto; (and just remove the float).
Also, you don’t need float left on the image and
horizontal is not a valid value for the
What is more recommended? Margin or padding?