How to get navigation links on the right side of the header and with more space between each link?

HTML-CSS
1

https://codepen.io/gsk1/pen/OJJbRMe

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.

2

I think this link will help you out here: https://www.w3schools.com/css/css_navbar.asp

1 Like
3

Hello @Storied!

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.

    justify-content: space-between;

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 <nav>.

Hope it helps!

1 Like
4

You can give the .nav-bar element 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 flex-direction property.

1 Like
5

What is more recommended? Margin or padding?