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.
You can give widths for your sections. After, you can use the properties
gap to not make them stick to each other.
nav, you can give it the
display property with the value
flex and then use the property
justify-content instead of
align-items concerns the second axis you define, so if your
column is the axis concerned by
align-items. To work on the
row axis, you would need to use the
Hope it helps you
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.
nav, you can work with
id you defined:
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
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
.container2. Then, for the
div with the
content, you can use the property
All what I explain is just one way to do, there are other ways.
Awesome. I’ll apply these. Thank you for the help.