Why can't I get some of my images and text to center well or easily?

Question

Please see the string of code I'm building here --> https://code.sololearn.com/WZ706L5ZDDU8

I'm new and learning so forgive me if its messy

Answer 1

Ed Testa,
Give an overflow attribute to your CSS boxes if you don't want to let the text outside the box.
https://www.w3schools.com/cssref/pr_pos_overflow.asp
For images and backgrounds I suggest you use 'cover'
background-size:cover; if you wanna fit the image.
https://www.w3schools.com/csSref/css3_pr_background-size.asp

Hope this helps👍

Have a look at the changes in the code👍
https://code.sololearn.com/W2UMapBlI8sz/?ref=app

Additional::
To get you started with placing boxes, here are some great examples to start::
FLEX-LAYOUT:
https://www.w3schools.com/csS/css3_flexbox.asp
https://code.sololearn.com/WH67FTMsWZ4V/?ref=app
GRID-LAYOUT:
https://www.w3schools.com/css/css_grid.asp

Answer 2

I appreciate the help, I'm trying to center the mask at the bottom of the page and can't seem to get it to center for some reason. It almost seems like it is floated to the right but it is not.