Why isn't this flex container displaying correctly on Firefox (on mobile)?

Technical Q&A
1

I was just testing my site on different mobile browsers and everything looks fine on Chrome, but when I tested it on Firefox, I noticed that a flex container isn’t displaying correctly. For some reason, the flex items in the container have extra spacing beyond just the ‘margin-right: 10px’ property, and I can’t figure out why. It’s making the list items in the flex container spill over the page width, causing a scroll bar to appear

This is how my site looks in Chrome (and how I want it to look):

2.jpg
2.jpg1452×902 136 KB

And this is how it looks in Firefox:

1.jpg
1.jpg1452×902 185 KB

Can anybody help me get to the bottom of this?

Thanks in advance!

2

For this you’d need to share a url. Images are helpful at times (thankyou for doing that) but it would need local device testing to save guessing.

Are you able to share a url?