Struggling with Flexbox (centering content)

I am attempting to center an item in my welcome section, using flexbox and justify-content. After a lot of trial and error, I am still uncertain where I am going wrong. Any guidance would be much appreciated!

Just a typo, quite difficult to see: diplay: flex

I’d advise using the debug view when you’re building stuff in Codepen: it opens a new tab with just the end result, no Codepen UI. It’s then easier to use the browser dev tools. In this instance, if you’d inspected that element, it would have shown you the styling rules applied to it, and the diplay: flex line would be crossed out and have a little warning icon next to it.

Thanks Dan! I really appreciate your help.

1 Like