using container-fluid within bootstrap cause horizontal scrollbar

.row{
margin: 0px;
}

quick easy fix this is all you need


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


In my case this fix worked well:

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

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