Flex-box not responding

HTML-CSS
1

Hi guys, so I want my flexbox to be in rows but the flex-direction isn’t responding. I think some of my codes are repetitive or maybe blocking the property from working.
I’m not exactly sure why it isn’t working.

Also the nav-links seem to overlap the intended link. For instance, when I click on the Your Part (nav-bar), it’s not linking back to the Outcome part. It starts off in the middle of the sentence. I hope that makes sense.

https://codepen.io/shaniakond/full/zYKPqmy

Thank you!

2

Hi @ShaniaKond.

  • Your .container-flex element has #pricing as its immediate child. Therefore the elements with id of box-n are not flex items. Try applying the display: flex on #pricing instead.
  • It starts off in the middle because the menu bar which you have fixed is blocking it. When you click the link, the element you are linking to will be displayed starting from the very top of the view port overlapping with the fixed menu.

I hope that helps.

3

hii @nibble , thank you for responding. So I did what you suggested with the flexbox and all it’s giving is one column with all the items inside.

  1. How can I have three separate columns instead?

  2. I may need assistance with the menu bar. Is it because I used the #nav-bar element in CSS for the link to start in the middle or is there an error in my code?

4

Well I see you have 3 separate columns. I don’t know what you mean by having three separate columns.
About the menu bar, you can give the elements a top margin equal to the height of the menu bar when they are at the top. You can also add a div whose height you can “switch” on or off depending on where the element is on the view port. That requires some JS.

5

My bad. I was going to type rows…

OK. I’ll give it a go on the menu.
Thank you

6

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