How to determine what element on the page causes the horizontal scroll?

It is amazing how gpt can just answer this question, when I've struggled with this for so long.

You can run this in the console to see what the offending elements are:

[...document.querySelectorAll('*')].filter(el => {
  const r = el.getBoundingClientRect()
  return r.right > document.documentElement.clientWidth
}).forEach(el => console.log(el, el.getBoundingClientRect()))

You can also highlight them:

[...document.querySelectorAll('*')].forEach(el => {
  const r = el.getBoundingClientRect()
  if (r.right > document.documentElement.clientWidth) {
    el.style.outline = '2px solid red'
  }
})

.