Scrollbar is moving page content to the left

Question

I have been building my site on Bootstrap for the first time and I'm having a problem that I can't find a solution of this. When I add some content and if its large and big enough to add a scroll bar in browser, whole page content moves towards left.

In simple words, If there is scrollbar, page content is moving to left like 17px and if not, it works okay. I don't want to add a perm scrollbar here like

overflow-y: scroll;

and if I add

width: 100vw;

It works fine and contents stays at its position even with scrollbar but if there is a vertical scroll bar, horizontal scroll appears too for no reason.

Answer 1

You have couple of solutions:

1. You can show your scroll permanently and style it accordingly to be a part of your page:

    html { overflow-y: scroll; }

2. You can add:

    padding-right: 40px;

   as 40px is what I have heard is the max scroll size that you can get.

3. Create a parent div that will have all of your contents, then create a child that is slightly smaller, make it the way that changing parent size will not make child size to change.

4. You can create JS function that will detect if the scroll is displaying on the page, and it would change the margin settings.

5. You can use media queries to tackle the problem.