No Container Max Width & Positioning

[jasonixr]

I’ve created a site without a container on the pages for which I need to set a max width so it still looks good on 4k screens. Without the max width the alignment gets weird at very high resolutions.

This support thread covered how to do this, which is great. I simply placed this in the page CSS:

.x-section {
max-width: 1400px;
}

The problem is that while it’s limiting the max width it is also positioning the entire page to the left of the screen. How can I force it to center, similar to how it does with a container? I thought I would be able to add “position: relative;” to do this but it isn’t working.

[friech]

Hi Jason,

Thank you for writing in, have you try applying your parallax background on ROW instead on the Section? That will make your background stay inside the container.

With your custom CSS above, you need to set your section’s left and right margins to auto so it will be centered.

You can force the left and right margin auto to your sections with CSS, but this will going to affect all your sections sitewide.

.x-section {
	max-width: 1400px;
	margin-right: auto !important;
	margin-left: auto !important;
}

Hope it helps,
Cheers!

[jasonixr]

Haha, not sure why I didn’t try auto margin. This does exactly what I want, thanks!

(PS I have parallax on the section, row, and column levels in various sections, hence why I was looking for a solution involving max-width)

[rad]

Hi @jasonixr,

You’re most welcome! Yes, left and right auto-margin is usually used for centering layout blocks, different from text alignment

Thanks!