I cant find what causes overflow on mobile - css

Question

I built header and section hero in wordpress. I used clean code and i have an overflow on mobile. Always in devtools and sometimes on my mobile phone. Its so difficult to find it beacuse when you edit or delete any element in devtools, overflow gone.
https://fisite.pl/page/
Screenshot:
see devtools screenshot

Answer 1

Sometimes Chrome DevTools can be a bit buggy. I'd suggest trying to reproduce the problem in Firefox DevTools first of all.
There can be many reasons as to why something is overflowing - check for elements with a fixed width-size, position: absolute and other CSS-properties that could cause overflow.
One solution is to give all elements a border in CSS - that way you have the option to visually see if there's any overflowing content.
* {
border:1px solid red !important;
}
If you have a relatively small page, you can use Chrome DevTools to delete elements separately. Keep doing this on elements you suspect might cause the overflow until your site doesn't have overflow anymore. Then you'll know what element is causing the overflow:
Hope this helps!

Answer 2

You can add the below classes in the style sheet.
.ct-section, .ct-inner-content{
overflow:hidden;
}

Answer 3

As well as the above answers, another thing to check is the styling rules on pseudo elements like ::before. (width, padding, margins)
Issues for pseudo elements can be hard to spot in the developer tools using above techniques.
Another fix is:
#media only screen and (max-width: 768px){
html,
body{
width:100%;
overflow-x:hidden;
}
}
(from discussion at: https://wordpress.org/support/topic/overflow-issue/)