Paste this in your browser console to search for HTML elements which extend past the window's width and create a horizontal scrollbar.

find-elem-with-breakout-width-2.js

let widestElement = document.body;
let widestElementDepth = 0;

function checkElemWidth(elem, depth) {
    const currentWidest = widestElement.getBoundingClientRect();
    const boundingRect = elem.getBoundingClientRect();
    const currentRight = currentWidest.right;
    const right = boundingRect.right;
    if (right >= currentRight && depth > widestElementDepth) {
        widestElement = elem;
        widestElementDepth = depth
    }
    // Recursively check all the children
    // of the element to find the culprit.
    [...elem.children].forEach(elem => checkElemWidth(elem, depth + 1));
}

checkElemWidth(document.body, widestElementDepth);
widestElement.scrollIntoView();
console.info(
    `widest element, ${widestElement.getBoundingClientRect().right}px from left is: ${widestElement.className}`
);
console.log(widestElement);

find-elem-with-breakout-width.js

let widestElement = document.body;
let widestElementDepth = 0;

function checkElemWidth(elem, depth) {
    if (elem.clientWidth >= widestElement.clientWidth && depth > widestElementDepth) {
        widestElement = elem;
        widestElementDepth = depth
    }
    // Recursively check all the children
    // of the element to find the culprit.
    [...elem.children].forEach(elem => checkElemWidth(elem, depth + 1));
}

checkElemWidth(document.body, widestElementDepth);
widestElement.scrollIntoView();
console.info(
    `widest element, ${widestElement.clientWidth}px wide is: ${widestElement.className}`
);
console.log(widestElement);