SOLVED Product landing: Can't align header

SOLVED PLEASE IGNOREI’m trying to make a header bar with navigation links for the first time using flexbox.
When I apply display: flex to the header element in CSS, in an attempt to vertically align the logo and links, the navigation links become no longer spaced out (see the link to see this).
However if I remove the display:flex and align-items from the header element in CSS, the navigation links become spaced out but then aren’t vertically aligned with the logo.
I can’t get both to happen (ie. be spaced out AND aligned vertically) at the same time. I have tried many combinations but can’t figure out if some things are conflicting each other!

Might be easier to look at my work below, see the commented part of my CSS to see my problem in action:
I’m very stuck on this so thanks in advance!

Hey Ellie,

nice to meet you! :wave:

I’m having a hard time to understand what your goal is. I’ve actually written a reply, but I found out that it probably doesn’t fit your question, so I ditched it. Especially because your CSS comment is about the feature text, but your post is talking about the header, so I can’t connect the dots.

Understanding layout/design in written words is often hard.

It would be awesome to see a small mockup,
Excalidraw is a great tool for this.

1 Like

@ellie2 I’m a bit confused about your question. Are you trying to do something with your header or the feature text, as that is what the CSS comment is about? Your page looks like it is coming along nicely!

1 Like


Apologies but I actually figured it out late last night and completely forgot to delete this question!! I will delete it now!

Thanks anyway though!

So sorry but I actually sorted it out late last night but I’m unable to delete my question.

Thanks for reading! Sorry it wasted your time!