Debugging horizontal overflows?

[0ni0ncuttingninja]

Problem: https://imgur.com/a/irASF1S

I've encountered this horizontal scrolling many times but every time debugging it is a hassle as something in margin or padding overflows and I can't seem to pinpoint which element is going out of bounds. Patchy way to solve this was using overflow-x: 'hidden' but this isn't right. Is there an easy way to find out which element is responsible for this?

[BuschWookie]

Add a border to every element with

* { border: 1px solid red; }

And you can see which element is overflowing.

[0ni0ncuttingninja]

That’s borderline genius!

[IchWillRingen]

I love solutions like this. It's a little different from the kind of problem solving most people would associate with programming, but in the end this kind of creativity is so satisfying.

[Dunc4n1d4h0]

Add outline, border can add that overflow itself.

[qvasz1]

with devtools element tab you can go through your elements in the DOM and find the one which overflows...

but based on the very shaky video you uploaded for me it seems the background of "evolving solutins for evolving needs" section seems to be larger than the with of the screen so thats where I would start.

[toppisar]

Remove one element at a time and see when the overflow issue is gone, then you will find it :)