Margin not working in preview

My current design works just fine in the designer, but then I try to preview it the padding between the hero-columns and home-content does not work: https://preview.webflow.com/preview/my-new-site-project-f9cd1e9fd97c2e083d9?utm_medium=preview_link&utm_source=designer&utm_content=my-new-site-project-f9cd1e9fd97c2e083d9&preview=e3853f7ff3cc5461e617d23558571e7b&mode=preview

Hi

Columns are trap “Webflowers” - I believe that columns are designed to present text and not for composition. I dive in your project and found that you are using Min H, Min W, Max W and Max H to control your elements. I suggest you to get rid of the columns and use flex box. in case you are not familiar with flex you can start here - webflow university. For any other questions feel free to contact me :slight_smile:

1 Like

Hi @designor, it is not clear to me which styles you are having trouble with, can you tell me a little more about what kind of layout you are trying to achieve?

Is it possible for you to upload a screenshot of the affected elements?

I would take a look at the Flexbox example layouts for a good responsive two column layout: Visual CSS flexbox builder | Webflow

If you can help to share more info on the exact part of the design that is not rendering as you expect, that will help a lot.

I’m trying to make the design you see in the designer, which looks like this:

However, as you can see in the preview, my design ends up looking like this. which is not what I want:

The div block ‘home-content’ (last picture with paragraph) already has the ‘display: flex’ property.

Hi

image3 in column-2: set the image to static position instead of absolute