Margins help

  • Anonymous
    March 25, 2026 at 11:18 am

    Hello. I’m having some issues with margins on my website.
    – On desktop, my header and primary nav are indented and not lined up with the text in the container below. I would like them to line up.
    – I have a grey rounded container towards the bottom of my home page. I have set that container to have 16px margins on left and right for mobile, but only the left margins seem to be working. How can I fix this?

  • Ying
    March 25, 2026 at 12:39 pm

    Hi,

    – It’s because you have 16px padding-left for the site header on screen that’s wider than 769px with custom CSS, while your content does not have paddings.

    The solution is simple, you just need to add 16pxpadding-left and padding-right to the content. I would recommend adding padding-right to the site header as well to keep it balanced.

    – I see both margin-left and margin-right are set to 0 for the inner container, no margin applied for the root container. However, I don’t think you should be using margin in this case; you should be using padding.

    The solution is removing the background color from the root container and adding it to the inner container, add set paddings for the root container.

  • Anonymous
    March 25, 2026 at 12:55 pm

    Thanks Ying! Your container fix worked.

    For the site header padding, I put in that custom CSS because my header and nav were basically right up against the edge of the screen on tablet. I’d prefer to remove the custom CSS entirely rather than changing content padding, but what can I do to keep the appropriate header/nav padding on tablet?

  • Ying
    March 25, 2026 at 1:05 pm

    Your content should ALWAYS have paddings, the same goes for the header, it’s a pretty standard rule for a website.

  • Anonymous
    March 25, 2026 at 6:47 pm

    Thanks Ying. I just checked the customizer, and it looks like my content padding is already set to 16px.

    content padding settings

  • Alvind
    March 25, 2026 at 9:03 pm

    Hi there,

    In that case, you can remove the custom CSS and the padding set on the individual containers in tablet view, so it will inherit the padding defined by the theme in the Customizer.

  • Anonymous
    March 26, 2026 at 1:13 pm

    Thanks Alvin. Apologies for my confusion, but I’m seeing the header alignment issue in desktop view. Which CSS should I remove?

  • Ying
    March 26, 2026 at 1:22 pm

    I just checked the customizer, and it looks like my content padding is already set to 16px.

    You are using the contained layout for the content container, which means it removes all the theme paddings, so there are no paddings for your content on the homepage.

    If this is not intended, please change the content container width to default. I’m not sure how you did that, please check 2 places:

    1. layout element at appearance > elements.
    2. layout metabox in the page editor.

    Let me know 🙂

  • Anonymous
    March 29, 2026 at 6:10 pm

    Thanks Ying, looks like that resolved it.

  • Ying
    March 30, 2026 at 7:19 am

    You are welcome   🙂

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.