How to horizontally center a flex item with px flex basis on mobile devices?

Try looking here I always use this link when working using Flexbox, as it's super helpful. Looking at your codepen, I'm noticing that you're sort of mixing and matching old techniques with flexbox. If you use more flexbox attributes, all you need to do is apply the needed flexbox properties on your section tag, and then apply the widths on your items inside the section. You can get rid of about 70% of your scss code using just flexbox properties :). I haven't tested with px, rem, or em with flex basis, but I remember as of late 2015 (so things could have changed), that Microsoft Edge does not like flex-basis integer or % values. So flex-basis of 2 or 20% did not work when I was working with it. I'm not quite sure however if it will work with px, em, or rem values either. All other browsers seemed to be happy though. Lastly, I suggest swapping your media query values with your non-media query values. Your default class values should always be done at the smallest screen width, which is at 320px (for now). You then proceed to increase your screen size until the UI breaks, and then apply a media query there. With your code in mind, the default values should be for UP TO a screen width of 640px. And then your media query will be @media screen and (min-width: 641px) { classes }. Chances are though since the layout is so simple, with flexbox you likely won't even need a media query ^^