Streaming live at 10am (PST)

Help with Odd Header Margin Spacing Issues

Hey all. I can’t for the life of me figure out why there are uneven spacing surrounding my header content for this one website I’m building. See the screenshot below. As you can see, the left spacing seems to be practically double the spacing on the right side of the header text. I checked out all of the nested layers and either the margins and padding value are equal or zero. I’m stumped. Could someone please take a quick look and see what I’m getting wrong here?

Again, end goal for me is to create even spacing on the left and right side of the header text and the problem is the left spacing seems to be double the size of the right side spacing.

Any help would be greatly appreciated. Also see read-only link below. Thanks!


Here is my site Read-Only:
https://preview.webflow.com/preview/rg-johnson-company-inc?utm_medium=preview_link&utm_source=designer&utm_content=rg-johnson-company-inc&preview=6c34483e1dedb54f66248ccbd251fea9&workflow=preview

I’d suggest that you justify and align the hero-container to the center with respect to the hero-section. On the right hand side, in the editing tools, you can find the vertical alignment option.

Let me know if that works!

Thanks for responding @vedant_athavale ! Unfortunately, it does not fix the issue at-hand. While it does center all of the elements along the center vertical axis, it still leaves a wider margin on the left than it does on the right. See screenshot below for what I’m talking about.

Hey, take a look at this! In total, I suggest these three changes.

Change max width to Auto. Change min width to 80% (your preference) and then for the layout, use the first option (max width utility option ). I’ve marked these for your convenience.

It should work now!

Hey thanks @vedant_athavale. Unfortunately it’s still not working for me. It looks great on your screen, but mine still looks the same after implemented your steps.

Any clue as to why that might be the case?

When I visit your read me link, in the Navigator it shows me that your hero-container is under hero-container-outside. And in the latest image that you shared, its showing that its under Div Block 7.

Both of them are different. Just cross check once that your Div Block 7 does not have any kind of uneven paddings on the either side. And in the Div Block 7, vertically center align the objects under it. It should work. If not, I am here to help with whatever I know. Even I am curious to know why such thing is happening!