Flex/ Positioning Question

can anyone take a quick look at this and tell me what I am doing wrong? I am looking to position the images in a row inside of the flex container with the id="projects. They wont seem to stay in the same row. What am I doing wrong? Thanks in advance for the help!

https://codepen.io/devynqualls/pen/VwmQGgR

Remember, flex positioning only works on the immediately following children. In this case that is:

<div id="project">
  <div id="project1">...</div>
  <div id="project2">...</div>
</div>

These two divs are indeed being displayed in a row. But the second div has multiple images in it and they are wrapped in additional divs, which are block level elements and thus stack on top of each other. That’s why the images in project2 are stacking in a column. So you’ll want to make those images in project2 stack in a row instead.

2 Likes

I do not quite understand this, would you be able to elaborate further? or possibly explain how the code should look?

For the project 1 and project2 divs, how are you getting them to line up side by side in a single row? You could do the same thing for the divs inside of project2 as well.