Flex-direction: row not working

For my class .flex-container2, I am trying to turn this into a row that fills the width of the page, like my other flex containers, but am unable to do this. I would like the three divs in this container to be side by side.

Link to my code: https://codepen.io/IkeaFlowers/pen/pordOxw

Help is much appreciated! :slightly_smiling_face:

You need to wrap the divs inside the .flex-container2 div.

Like this

It was like this before

Pro tip: If the div inside flex-conatiner2 isnt doing anything crucial just remove it and everything will work as you want to.

Explanation: Here in your case as you want your divs to go inline meaning in a row fashion then the flex-container2 div should be a direct parent to those divs for it to work. You had an unnecessary div that was blocking that so removing it will solve the issue.

Thanks, this solution has worked and appreciate the explanation!

1 Like