We expect our media query to start working at 800px, so we used 50em for the media query (800/16). Maybe we used a tool that automated the conversion from pixels to ems in our media queries.
Sadly we have used pixel-based dimensions for our blocks: one has a pixel width, and the others have rem and em-based widths but we have set the root font-size to 16px at some point in the project’s life cycle, so they’re virtually pixel-based now.
If the user’s base font size remains at the conventional 16px, we are alright. If it’s different, our element dimensions and our media queries will become mismatched.
In browser settings, change the base font-size to 24px. As a result: