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!

Hey @vedant_athavale ! My apologies for the delayed response. Your suggestion worked! I was able to fix the issue as you suggested. It’s now showing a nice even margin on both sides of the header text section. Much appreciated!

1 Like

BTW @vedant_athavale I also wanted to apologize for the adjustments made mid-diagnosis! I’m still not super savvy with Webflow or development in general so I’m unsure how to share a read-only website while keeping a separate version to work on independently that doesn’t impact the shared read-only.

Its alright! I’m glad that it worked!

1 Like

Even I dont know how to exactly do that. What I do is

  1. Keep Project 1 as your active project.
  2. Clone the Project 1 and make it as Project 2.
  3. Keep making the changes to Project 2 as in Project 1.

If you have a doubt and want to share a read only, share the read me link of any one of those projects and then later make the changes to Project 1.

This sounds long but it does the work in short time without much efforts!

1 Like