using container-fluid within bootstrap cause horizontal scrollbar

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?

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

I also faced this problem. I don't know the cause of the problem. It maybe a bug from Twitter Bootstrap. Now, I have to manually add the overflow-x:hidden to my body tag:

body { 
   overflow-x: hidden;
}

Jsfiddle

In my case this fix worked well:

.row {
  margin-left: 0;
  margin-right: 0;
}

.row{
margin: 0px;
}

quick easy fix this is all you need

Make sure to encapsulate your row classes with containers.

<div class="container">
    <div class="row">
        text
    </div>
</div>

The container offsets the -15 margins on rows with +15.

You can dirty hack the row by add new class to the full width row and create overwrite css file:

.noLRMar{
  margin-right: 0 !important;
  margin-left: 0 !important;
 }

<div class="row noLRMar">
  
 </div>

In my case, changing @grid-gutter-width to odd number caused this, because;

mixins/grid.less

.container-fixed(@gutter: @grid-gutter-width) {
  margin-right: auto;
  margin-left: auto;
  padding-left:  floor((@gutter / 2));
  padding-right: ceil((@gutter / 2));
  &:extend(.clearfix all);
}

So if you pick an odd gutter-width then you will end up having uneven paddings and you will see a horizontal scrollbar.

Bootstrap 5 solution:

You can add to the .container-fluid element a second class .overflow-hidden.

I got the same problem, using .container-fluid on its own creates horizontal scrolling, but I fixed it with a nested .container, hope that helps!

<div class="container-fluid">
    <div class="container">
    </div>
</div>

With Bootstrap 3.3.5, I was getting a horizontal scroll bar at certain widths near the change from the medium (md) to small (sm) screen size. Adding a div.row between my div.container-fluid and div.container fixed it for me.

<div class="container-fluid  myFullWidthStylingClass">
    <div class="row">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    #content
                </div>
            </div>
        </div>
    </div>
</div>

Adding margin:0; to your rows will break some styling elements.

Set max-width in the container class instead of width. It will remove the horizontal bar.

.container-fluid { 
	border:1px solid red;
    max-width:1349px;
	min-height:1356px;
	padding:0px;
	margin:0px; 
}