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.
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.