Ugh, I've been there so many times!
There is honestly nothing more frustrating than having everything look pixel-perfect in Chrome DevTools only to pull it up on an actual iPhone and see that dreaded horizontal scroll. Don't worry, it’s usually not your CSS Grid or Flexbox logic being "wrong"—it's almost always a weird mobile quirk or a tiny setting we forget about.
Here are a few things I’d check first that usually fix this for me:
1. The "100vw" Trap
If you're using 100vw for your container widths, stop right now! On mobile (especially iOS Safari), 100vw includes the width of the scrollbar, whereas 100% does not. This is a super common reason why things shift to the right or create that extra white space on the side. Try switching your main containers to width: 100% or max-width: 100% and see if that snaps things back into place.
2. Double-check your Viewport Meta Tag
You mentioned a meta tag—make sure you have the standard one in your <head>. Without it, mobile browsers try to mimic a desktop width and then scale it down, which breaks everything. It should look exactly like this:
<meta name="viewport" content="width=device-width, initial-scale=1">
3. The Box-Sizing Reset
If you haven't done a global reset for box-sizing, padding might be pushing your elements wider than the screen. I always add this to the very top of my CSS file to make sure padding stays *inside* the width I set:
* { box-sizing: border-box; }
4. Flex Items and Min-Width
Flexbox has this annoying habit where items won't shrink smaller than their content by default. If you have a long URL or a large image inside a flex item, it might be propping the whole container open. Try adding min-width: 0; to your flex children. It sounds weird, but it tells the browser, "Hey, it’s okay to make this smaller than the text inside it."
5. Use the "Red Outline" Trick
If you still can't find the culprit, I highly recommend adding this temporary CSS snippet. It puts a bright red border around every single element on the page:
* { outline: 1px solid red !important; }
When you refresh on your iPhone, look for the red box that is sticking out further than the rest. That’s your troublemaker! Usually, it’s an image or a piece of text that isn't wrapping correctly.
Safari is definitely pickier than Chrome, but usually, it's just one of these small things. Let me know if that helps or if you're still seeing that scroll!