[Resolved] Alignment Issue With Margins

[Math]

Hi,

I created a home page on a demo site and everything was working fine.

Soon after I copied the content to the actual website, the alignment appears to be off. Using Columns, if I were to add a 60px of Horizontal Gap, the Wrapper will add -60px in margin to bring it into alignment. But it’s not happening on this page.

If you look at the Hero container at the top, it’s slightly to the right. Same with the Container that’s underneath each heading (i.e. News, How To, and Reviews).

Do you know what’s causing this misalignment?

Thank you.

[Fernando]

Hi Math,

Can you try removing the 60px padding on the first Grid Column in your Grid Block in the live site?

[Math]

Hi Fernando,

I didn’t want to do it on the live page, but I replicated Home page here.

I removed the 60px, but now there is no separation between the grid items. This isn’t usual behaviour of the Container and Grid.

[Fernando]

To clarify, are you adding the spacing through the Grid Block’s Horizontol Gap setting? See: https://docs.generateblocks.com/article/grid-overview/#horizontal-gap

[Math]

Yes, I’m adding spacing using Grid Block’s Horizontal Gap setting.

[Fernando]

I see. Thank you for clarifying. Can you re-adding the horizontal gap? I’ll re-check the issue and see how to approach it.

[Math]

I added 60px back. Please take a look and let me know.

[David]

Hi there,

would you be able to send us a screenshot of the issue, so i can compare?
Currently i don’t see the issue, but that may be just my old eyes and lack of coffee 🙂

On desktop what i do see is:

the Hero Container Block is 1200px wide with 0 left/right padding
And the Heading Containers ( eg. News ) is 1160px wide with 0 left/right padding.

[Math]

Hi David,

It seems the site owner was able to get it fixed right after I responded. He had some extra CSS that was causing the misalignment.

It’s fixed now. Thank you for your time.

[David]

Glad to hear that!

[Author]

Posts