Help needed with flex on landingpage

[ederk]

Hi everyone,

I have been having trouble with my flex showing up in a row. What I would like to see is each section (#longdistance, #local, and #auto) to appear side by side in three different flex boxes with some spacing in between the boxes to cover the whole width of the page. I will attach a link of what I have done so far. Thanks in advance. (Bonus points if you can help get my nav bar text to appear on the right hand side to give more space in between the logo and the nav bar)
Been working in vs code and after copying and pasting into code pen it looks a little different not entirely sure why but hopefully you’ll get what I am trying to do.

ZEveZZW

[LucLH]

Hi @ederk,

You can give widths for your sections. After, you can use the properties justify-content or gap to not make them stick to each other.

About your nav, you can give it the display property with the value flex and then use the property justify-content instead of align-items.

align-items concerns the second axis you define, so if your flex-direction is row, then column is the axis concerned by align-items. To work on the row axis, you would need to use the justify-content property.

Hope it helps you

[ederk]

@LucLH
I appreciate you commenting back, I have tried this on both my #navbar id and li tag and I am not getting any results. Same thing with the flexboxes for the content. Im guessing that im not targeting the right class, id or section of the webpage. So im curious what part of the webpage I should be targeting to get this to display right.

[LucLH]

For the nav, you can work with id you defined: nav-bar

#nav-bar{
  align-items: flex-end;
  flex: 2;
  background: bisque;
  color: black;
}

If you apply what I suggested it works (to have the nav-bar at the right). You can use the property display and the value flex. Then, you change the property align-items with justify-content, in keeping the same value flex-end. It gives something like this (maybe you search another result):

For the section, apply the width for the divs with the class: .container2. Then, for the div with the id content, you can use the property justify-content.

All what I explain is just one way to do, there are other ways.

[ederk]

Awesome. I’ll apply these. Thank you for the help.