Centering DIV with overflow (hidden)

Design help General
1

Hi. I am finding trouble trying to center images inside a div so that when expanding the browser they stay center with overflow hidden.

1740px DIV that is set to overflow the page via a parent DIV. What happens is that at smaller scales the image is justified left of the browser. I have tried using a flex layout, adding auto margins, etc. Still cant figure out why I cant center the DIV.

Any help or guidance would be greatly appreciated. Thanks in advance.

Here is my site Read-Only: https://preview.webflow.com/preview/everythere?utm_medium=preview_link&utm_source=designer&utm_content=everythere&preview=91c7a3f830c363166a782601a197cb7b&pageId=5d2e73332663b91c70ab1a10&mode=preview

2

Is it Div Block 46 You are talking about? Ad some video (loom.com), I don’t understand the issue

3

Sorry, here is some clarification:

DIV: gifsection

Here its viewed at a large screen resolution. Its centered, its fine.

27%20PM
27%20PM4254×1854 825 KB

Here its viewed at a desktop resolution. In this case the image on the left should be off the screen. The div goes beyond the browser screen here so im not sure why its not centered here.

40%20PM
40%20PM2420×1862 585 KB

4

Anyone have any ideas? Still stuck on this one.

5

@Jeremy_Stewart you’re almost there. The issue is that that unlike the section above it, the section you are having issues with is flexing horizontally to accommodate its children’s position. Just wrap that section in a wrapper that is flexing like the one for the video above it (vertically and centered) and you will be all set.

6

Don’t forget to set your max width for the new wrapper smaller than the width of the section it contains. I just duplicated the “case” div and emptied it out and put your “gif section” in an it worked like a charm

7

Awesome. I did just that. I had to also remove the auto margins on gifsection for it to work.

Thanks for your help!

8

:slight_smile: no problem!