I can't get flex to align the header and nav elements for my product landing project

HTML-CSS
1

Hello everyone!

I have been working on the product landing page and I am trying to align the header-img and nav-bar using css flex box. I have set the header display property to flex and set the flex-direction to row. The header and nav elements (with ids header-img and nav-bar respectively) are both nested in the header.

I was hoping to get help in figuring out what I am doing wrong to cause the elements in header not align themselves?

Link to my project here.

I have tried to demarcate elements with different colored borders.

2

You have <style> tags in your CSS panel, those are not necessary in codepen, and they also break your CSS.

3

Hey thanks! Taking that out worked.

Wow I spent a good 2 hours trying to fix that by tweaking the css here and there.

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.