Streaming live at 10am (PST)

Div block auto margins

Hello all, I’m working on a webflow tutorial. I’m having difficulty centering the main text margins in the hero section. I set the div block margins to auto on both sides and max-width 1160. However, I don’t see any changes. I’m sharing the Figma design file and the web-flow link to the project.
Any ideas why? Thanks in advance.

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Welcome to the community @Andres_V!

Text works a bit differently as technically they are rendered as blocks that take up 100% of the width of the row within their parent element—in this case, the center aligned Div.

If you enable X-ray mode (either in the Canvas Settings in the top bar—where it shows the pixel width and zoom percentage—or by using the shortcut CMD/CTRL+Shift+X) you get a better idea of where the bounds of these text elements are:

Setting the left/right margins to auto (or clicking the center element horizontally button) on the containing Div does center itself within the full canvas, but to center the text you’ll need to change the alignment of the text as well:


I’m not seeing the Figma design file in your post so I’m not sure what your basing the design off of, but hopefully that helps get you closer to what you’re referencing :+1:

Hi @mikeyevin thanks so much for replying with a solution. I’ll try your suggestions. Here it’s the link to the figma file for reference.
Thanks again

Thanks for the link to the Figma file, it’s a nice design and thankfully it looks like it will be fairly straightforward to implement.

I’m not sure which tutorial you’re walking through, but the newest course (2021 design portfolio) is what I would recommend as it’s the most up-to-date and it does a great job covering all of the most important aspects—especially the benefits of a solid, consistent structure across your project: