Icons not centering

[dreps (Oscar G)]

Hi, I’m not sure why these icons are not centering in a div. I’ve tried everything and although it looks fine in the designer it doesn’t center when I preview or export the code. Can some one help? Here is my share link https://preview.webflow.com/preview/pikler2?preview=1dba2275a86ee46f481639fa1bfbc1ec

Here are the icons I’d like to center.

---

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

[Brando (Brandon Roche)]

Hi there,

Thank you so much for posting and excellent question!

I made a quick video showing one way you can center these using flexbox: https://cl.ly/2B1R1S3O0d1c

Hope this helps!

[dreps (Oscar G)]

Hi Brando,

Thank you so much for the video. I followed all your steps and it looks fine in designer but It’s still off when I preview. Am I doing something wrong? I’m using Chrome.

http://pikler2.webflow.io/

https://preview.webflow.com/preview/pikler2?preview=1dba2275a86ee46f481639fa1bfbc1ec

[Brando (Brandon Roche)]

On the live site it looks like you have some extra space on the image:

Can you please try removing this auto margin from the left and right?

[dreps (Oscar G)]

Just removed the auto margins and the same thing is occurring. I noticed the same transform styling also but couldn’t figure out how to remove it. It seems to be applying it dynamically to the the code on the html file. Does it have something to do with the javascript?

[Brando (Brandon Roche)]

Hi @dreps

After some more testing it looks like this is from some custom code you have in your header and footer. If you remove all snippets from both fields the issue is resolved:

You may consider going through them one at a time to see which snippet is the culprit.

[dreps (Oscar G)]

Yup that was definitely the problem thanks man!