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

Question

I have markup similar to this:

<div class="container-fluid">
    <div class="container">
        <div class="row">
            <h1>Hello World!</h1>
        </div>
    </div>
</div>

Obviously, I want the .container-fluid to span the entire width of the screen. However, in smaller screen widths, it doesn't seem to do that. There appears a space on both sides of the screen, thus reducing the amount of screen real estate and affecting the overall look and feel I'm trying to achieve.

Is there a way to get rid of this space? I want .container-fluid to span the entire width of the screen regardless of the screen width.

Answer 1

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.

Answer 2

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>