using container-fluid within bootstrap cause horizontal scrollbar

Question

Here is a simple example:

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12">DUMMY CONTENT</div>
    </div>
</div>

Demo in Fiddle

When I see the result in browser I get a horizontal scrollbar.

Why is this happening?

What am I doing wrong?

Answer 1

container-fluid was originally taken out of Bootstrap 3.0, but added back in 3.1.1

To fix this, you can either:

1. Use the newer version of Bootstrap style sheet

   Demo with New Style Sheet in Fiddle

2. Or add in the class yourself

   The .row adds a 15px margin to the left and right. Since .container-fluid fills up 100% of the screen width, the extra margin space causes overflow issues.

   To fix this, you need to add padding to .container-fluid class

   .container-fluid {
       padding-right: 15px;
       padding-left: 15px;
       margin-right: auto;
       margin-left: auto;
   }
   

   Demo with Custom container class in Fiddle