Alex Buddy Alex Buddy - 9 months ago 18
HTML Question

How to get rid of horizontal scroll of a page

I'm making a landing and I've this set of rules applied for the body and html elements:

html {
margin: 0px;
height: 100%;
width: 100%;

body {
margin: 0px;
min-height: 100%;
width: 100%;

Also, everything is viewported:

<meta name="viewport" content="width=device-width, initial-scale=1">

And on the picture, below, you can see main blocks of the page, they all have width 100%

the pics

However, nothing of what I mentioned really helped and the blocks of the page despite they all have 100% width, have different size and, there's a horizontal scrollbar too.

What should I do to get rid of the scrollbar and to make all the blocks be the size of a current viewport?


try put

overflow-x: hidden;
overflow-y: scroll;

at the body {