Responsive website: How to get rid of horizontal scroll bar?

Every now and then I have this problem, and a big part of solving the problem is identifying the element that's the culprit. I just came up with this little jQuery script you can run in your browser's JavaScript console to find which elements are wider than the body width, causing that annoying scrollbar to appear.

$.each( $('*'), function() { 
    if( $(this).width() > $('body').width()) {
        console.log("Wide Element: ", $(this), "Width: ", $(this).width()); 
    } 
});

Often times it's a matter of a single element which can cause the page to get the horizontal scrollbar. That can be a pain, but you can easily find out the offending element by this simple css trick

* {border:1px solid red}

You can also add the following properties if the element is hidden.

opacity: 1 ; visibility: visible;

Demo :https://codepen.io/i_abhi/pen/eYzpBjr

Link to the page? Chances are there is some kind of element inside the wrapper that is breaking past the browser window.

Often times it is with padding and widths. Keep in mind if you have an element inside the wrapper that is set to say 100% width and you add padding on the left and right of 20px. It will create a horizontal scrollbar because the element is 100% + 40 px.

So if you are building liquid elements inside a div you would do it like this:

#liquidelement {
   width:96%;
   padding:0 2%;
}

You need to subtract the padding from the widths, also always use percentages for the padding when doing layouts because it's fluid, not fixed.

You Can hide the horizontal overflow using css code (and then the horizontal scroll bar will never show up again):

body{
    overflow-x:hidden;
}