Mobile Usability - Content wider than screen

What was the old Theme you were using ? If that wasn't registering an issue - it would be good to see what they were doing if anything different.

we were using WP-Prosperity - https://wp-prosperity.com/members/ - no longer supported.
How to test if it's doing differently?

This is the CSS that theme applies to the pre element:

pre {
	background: #f5f5f5;
	font-family: "Courier 10 Pitch", Courier, monospace;
	font-size: 15px;
	line-height: 1.6;
	overflow: auto;
	margin-bottom: 24px;
	max-width: 100%;
	padding: 24px;
	white-space: pre;
	white-space: pre-wrap;
	word-wrap: break-word;
}

Hi David,

Tried the above pre tag. no luck

I tried to insert <pre> into a classic article which is currently showing as mobile-friendly. Then tested in GSC. I was expecting GSC to fail but it worked. Now I am wondering pre tag is not the issue? :-(

Really not sure how to troubleshoot.

Any other functions that a page with <pre> uses that others do not ? I noticed on some pages theres an ad injected immediately after it which could lead to a content width issue if the ad wasn't responsive ... but i cannot see how that would interfere with the missing styles.

All the resources are now loading and screenshot in GSC looking good but still reporting "mobile content wider than screen".
Tried disabling the ads, no luck

Can't really find which element causing this problem

The body element already has an overflow hidden property - so it theory nothing should overflow the container.
Aside from it won't apply to elements outside of the body - of which there is one Google ad iframe ....

Try adding this CSS - it will stop the HTML and Body from overflowing:

html, body {
    overflow-x: hidden;
}