How do I seperate individual items in the header section?

image

I want the sign-up/log-in elements to be on the far right but it’s not working.

Since you’re trying to put these elements where the nav is, I would suggest putting the signup and login elements within nav you’ve got there. You could try putting them in their own ul as:

<ul>
<li><a href="">Sign up</a></li>
<li><a href="">Login</a></li>
</ul>

And then use flexbox to align these items on the right side of the nav while keeping the others on the left. Have a go experimenting with flexbox and properties such as, justify-self and align-self. Hope this helps!!

1 Like

I’ve tried it but it still doesn’t work. Please check my code

Hello peace!
I worked on your code a little, is this what you had in mind?

If yes, I can describe how you get there, I can’t post the full code as
we are advised not to post working solutions here, they get deleted!

1 Like

something like this

Is it possible to separate the links because I want to put a search bar n the middle.

It is, how familiar are you with CSS, do you know padding, position, text-style aso?

1 Like

I know about padding but I struggle with positioning items.

I can give you a structure you can work with.
Use divs, divs are our Ductape:

Html:
Create a navbar div as the main container,
within it create a div containing a link class,
within that create three divs: left (links), center (search) and right (links).

CSS:
.navbar
Add background color.

Add “inline-block” to your Logo so it doesn’t mess up the header.
try padding values to position it

.links
here’s where the flexbox goes in with space-between.
Let the class float right.

.left (links)
.center (searchbar)
.right (links)
Use padding values on all four sides for all three classes until you are happy with the position.

I hope it helps!

should i remove the header and replace it with the navbar?

If you plan to add nothing else to header container like a background picture, you can remove it.