I am using an html template for my site.
URL - http://www.tekestate.com/site/easydelivery/index.php
Now I don't know what is wrong with my css because if you see it leaves a unwanted white space on the right which can be scrolled for the mobile version as well as the desktop version.
My CSS (very large to put it here) - http://www.tekestate.com/site/easydelivery/stylesheet/style.css
I looked for the solution but nothing worked as I am not able to figure out where in the problem lies.
分享 You have the rotated :before pseudo-element which you are using to mask the hero carousel which is bleeding off your screen, thus enlarging your external containers.
You can either apply overflow-x: hidden to your body element or fix the root of the problem by removing the left, padding from your pseudo-element and replacing your transform with transform: skew(0, -5deg); in this way you skew the container horizontally as you need keeping it straight vertical within the parent container.
Bonus answer:
The next time you have this same problem scroll into the empty area, click the first button on the top left of the Developer Tools window (Or just do CTRL + Shift + C with DevTools open) and then hover the mouse around on the white area like you're searching for the element, when it flashes up into your screen just click it and you can identify which element is causing you issues.
分享
