Aligning Webpage

Hey there,

I’m a beginner with Webflow, and I’ve had some difficulties aligning my webpage content in the middle of the page. Essentially, when I edit and add content in the editor, it’s aligned, but in preview mode, it isn’t. I’ve also noticed that the more I zoom out, the more all of my content gets pushed to the left. I was wondering how I could set it so that my sections are continuously centered in the middle.

@Allan_Muriuki welcome to the Webflow Community, please post your read-only link so that we can help you troubleshoot. Screenshots of the issues you are experiencing are also helpful.

Thanks,

Sam

Thank you for the warm welcome.

Here is the share only link and screenshots:
https://preview.webflow.com/preview/eunerd-promotion-landing-page?utm_medium=preview_link&utm_source=dashboard&utm_content=eunerd-promotion-landing-page&preview=e46b40494bddb84ee816b52fae82014b&mode=preview

So the issue is the width of the designer and preview, nothing is actually aligned to center, it just appears closer to the center in the designer because there is less horizontal space for the content to move left.

You need to do a bit of restructuring, look at this test project: https://preview.webflow.com/preview/testing-a7766d?utm_medium=preview_link&utm_source=designer&utm_content=testing-a7766d&preview=d29d876a5c9b2d01f435ef5cf3044c71&mode=preview

Specifically at the containers:

The content is nested within a section, that provides a bit of outer padding (30px on each side), then within that is a container, that is centered using auto margins, width, and max-width:

image

This forces the children inside of those containers to always be in the center of the page horizontally, because they are constrained by the boundaries of their parent, the container.

There are multiple ways of doing this, but this is probably the best place to start. Once this makes more sense, look into setting the parent to flex or grid and how that effects the positioning of child elements.

-Sam

Hey Sam, thanks for the advice. Greatly helped me improve my website design.