Hero text not behaving as expected

HTML-CSS
1

I’m trying to position my hero text but it’s behaving strangely. I want it to sit centrally over my hero image. I have moved it down by giving it a margin-top of 300px. I have set the left and right to auto hoping this would center it. But it hasn’t. Any ideas what I’m doing wrong?

https://codepen.io/t-lyons/pen/GXxgde

2

Try applying flexbox properties to the .hero class, align-item and justify-content as center

And after this you can remove the margin of .hero_text

Note: For centering horizontally, you can use text-align: center ( Block elements ) and for centering vertically, you can use either position properties or flexbox properties