How to remove extra white space from website when viewed on mobile browser

Question

Browser is rendering extra white space on the right side on mobile screens. I tried modifying the following properties without any progress:

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

It still does not remove the extra white space. I also don't see any element overflowing from the side of the grid. Any ideas?

Thanks!

My website: fanismahmalat.com

Answer 1

It seems to be something odd happening when switching to mobile with the scrollbar leaving the white space.

I added the following into CSS in the Chrome inspector and it fixed the issue:

html,body
{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden; 
}

I only tested this in Chrome, and again with the inspector, but this may help. I noticed you had height:1000px (hardcoded to 1000px). I'm not sure why exactly, but I think you can leave that as such if necessary.

Answer 2

The problem is in the image of the laptop that is exceeding in width. https://i.stack.imgur.com/zlg6R.png