css - Find element that is causing the showing of horizontal scrollbar in Google Chrome

Question

When I size my Chrome window to 328 x 455 pixels I still see a horizontal scrollbar. How can I find out which element is causing this? I've been looking at elements via the developer console, but can't find the element.

I then tried the script I found here, but nothing is logged. I tried it on element body, section1 and a bunch of others but don't know what else to do.

    $(function () {
        var f = $('body'); //document.getElementById("body");
        var contentHeight = f.scrollHeight;
        var declaredHeight = $(f).height();

        var contentWidth = f.scrollWidth;
        var declaredWidth = $(f).width();
        if (contentHeight > declaredHeight) {
            console.log("invalid height");
        }
        if (contentWidth > declaredWidth) {
            console.log("invalid width");
        }
    });

Answer 1

.slide-content .scroller {
  width: 1024px;
}

"fastestest" way: added this in inspector:

* {
  outline: 1px solid #f00 !important;
}

and the culprit appeared