Site alignment wonky - need help!

[rayeprescott]

Working on a site and I have a section of parallax scrolling planets I actually cloned from a webflow showcase resource. When I began the site I was a complete webflow noob (still kinda am to be honest) but I’m slowly working on understanding hierarchy and spacing with the design. I am slowly going through and trying to fix my mistakes but for the life of me I can’t figure out the following spacing issues.

1. My parallax scrolling planets seem left justified.

2. the lottie animation i have indicating to the viewer to continue scrolling. I am unable to figure out how to center it within it’s container so that it’s also centered on the page as well.

3. the final section of 5 planets and blackhole are basically the sites “nav” each planet will link to a page but anyways they seem to be right justified as a whole group. (I do have spacing on the planets individually to make them appear a little less grid like and more organically placed)

This is also somewhat more involved and maybe unrelated but incase there’s someone out there that can help me the site just goes to shambles in mobile view and i’m currently expecting to go into the breaking points and trying to fix it level by level but I kinda don’t even know where to begin with that so if anyone reading knows some tips or tricks to kinda navigate that or how to set things up initially to make that easier I would so appreciate the extra help.

I hope my query makes sense. Thank you so much in advance!

---

Here is my site Read-Only: [LINK]1
(how to share your site Read-Only link)

[AmDizzi (Curtis)]

Hey @rayeprescott!

Centering an element can be done in a number of ways depending on what you’re trying to accomplish in terms of layout. Here are two options that work in your case:

1: This center alignment button centers any object with a fixed by applying an automatic margin to both sides. It’s best to use this with an object in a div block instead of applying it directly to the object, but it works in both cases.

2: Changing the holder container’s to a flexbox allows for many more customization options. In the screenshot below, I’ve edited your “Container 4” class to be a flexbox with center alignment. See more about flexbox here.

Hope this helped.

Cheers,
Curtis

[rayeprescott]

Thank you so very much! This worked amazing for the lottie animation and the final planet grid. The parallax is still wonky but I’m looking into it and this is helping me do that! Thank you again for your time it is greatly appreciated!!!