I need some advice on overall code structure and positioning?

HTML-CSS
1

Please ignore the design and overall look as this is just nothing more than practice (and I’m not done with it yet). By the way, I’m not sure why it comes out weird in codepen as in the title New World moved down or up, when I do ti in the browser, everything’s fine…

As you can see, for the image, title, and 2 buttons inside the class hero-container, I’ve set some specific px to make them look aligned and in the center and I’ve wasted so much time just trying to get this right.

  1. I just would like to know would there be a better way of doing things? Tried like margin: 0 auto but didn’t seem to work.

  2. Is the overall code structure all right?

2

have you considered using either flex display or grid display to align things for you?

3

I’m planning to learn those but I want to at least be good enough to position things properly with css before moving on to that.

4

okay then, I can’t see the reason but…
how about a table? You can maybe try to put things you need aligned in a the table and then you just have to center one element rather than many?

Edit: or try putting the h1 tag and the rest of the elements below into one single div so you can keep them organized together and they don’t flow over each other…