Scrollbar Is Moving Page Content To The Left

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

Solution 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.