Is the layout not displayed correctly on mobile devices?

Question

css

I worked through firefox and everything was adequate in it in the mobile modes of the inspector. But looking at the mobile everything turned out to be crooked. But the Chrome inspector gave the correct picture, as it really is. After it was not logical to understand what the problem was according to the layout rules, then by deleting all svg everything began to be displayed adequately.
The header and header are stretched with absolute positioning and contain a border. So you can see from them that the element is not stretched more than necessary, however, after removing the svg, the problem goes away. Moreover, in the body I wrote overflow: hidden and nevertheless the screen is larger than it is and scrollbars appear. The header also has a tag for mobile devices.
According to the inspector, it also does not show external margin, padding if you hover over the dom structure with the mouse.
Media breakpoints: Ipad, Iphone X under which to watch from the inspector.
PS For a long time there was no such thing that for so long I didn’t understand what the problem was in layout, save me :)

Answer 1

Width ysocials