Move - Step 1


#1

Seems like things aren't working as they should for me. The background image in .main isn't behaving as it should. The left and right sides of the image are stretched out too wide, but I don't understand why this is happening. And the text within .main is also not staying centered.

These seem like fluke-ish errors. I'm going about this the same way as I did for the first two projects, but things are not working right for this one..

Link to mine. What it should look like.

Edit: Even when I go back to the initial commit and apply text-align at that point, it doesn't work properly. Weird.


#2

Forgot the background-size property for the image! Dumb mistake. Still having issues with the text not centering, though. Also noticed that when I decrease the width of the browser to below 730px, the background image gets cut off on the right side, and a bunch of whitespace is left there. My code is up to date on GH pages.


#3

Ended up accidentally seeing the answer (maybe not such a bad thing here). The container was using width instead of max-width. If I would've compared the Move container code to the Innovation Cloud code, I might've spotted this.

So the text was technically aligning to the center, it's just that the container wasn't shrinking, making it look like center alignment wasn't working properly.