I am trying to do something like a float left with a block element in the center in flex box with a div #score that is one of the child elements of a flex container. I started off by using align self:center on #score and I expected the div to go to the center of the parent div, but instead it is on the side of the parent div and it also pushed the h3 element above it away from the center. I added flex wrap, but that changed nothing. I’m trying to design this to look something similar to the example project here : https://codepen.io/Em-Ant/full/QbRyqq/ .
How can I make the #score div place to the center and have it stop pushing the h3 element above it to the side? And is there a way I can do something similar to float:left in flexbox? Here is a link to my codepen : https://codepen.io/icewizard/pen/JLBpNQ
EDIT: flex-direction row and column did nothing but thats how this problem was fixed on stackoverflow answers…