The issue you're experiencing likely has to do with how the browser handles scaling and the viewport, especially on smaller screens. Even though you've set the wrappers to a fixed size of 100px by 100px in your CSS, the page's overall scaling and rendering might be influenced by the default viewport meta tag behavior or other responsive rules.
Here’s what you can check and adjust:
While your CSS specifies width: 100px for small screens, the padding and margin around elements can also contribute to unexpected layout results. Verify how these are affecting your layout when scaled.
Modern devices often have high pixel densities, meaning what you perceive as 385px wide might not correspond to the actual CSS pixels being rendered. The browser scales content to match this ratio.
Your media query for max-width: 450px seems correct, but ensure it’s being applied correctly. You might want to add debugging styles to confirm the applied styles in different screen sizes.
If the scaling still seems incorrect after the adjustments, there may be additional external influences, such as parent container styles or browser-specific quirks, that would require further investigation.