Hero text not behaving as expected

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?


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