Twitter Bootstrap: white space on left and right side in smaller screen widths?

Simply

.container-fluid {
     padding:0;
}

If scroll bar appears its due to border box, there must be

box-sizing: border-box;

in relevant class to make scroll bar disappear

I had the same problem using Bootstrap 3.0. Solved it for small screens by putting:

.container {
     padding-right: 0; /*15px in bootstrap.css*/
     padding-left: 0;  /*idem*/
     margin-right: auto;
     margin-left: auto;
}

in my own stylesheet.

Just add class 'p-0' beside 'container-fluid' class because in bootstrap padding:0 is already defined.

<div class="container-fluid p-0">Content goes here</div>

In bootstrap-responsive.css, the body gets a 20px padding on the left and right at smaller windows sizes. If you don't want that at all, remove it from your version. It's at line 803 and looks like this:

@media (max-width: 767px) {
  /*body { These are the lines you want to remove
    padding-right: 20px; 
    padding-left: 20px;
  }*/

If you just want to remove the white space on a certain element or class, add these margins to it:

 margin-left:-20px;
 margin-right:-20px;