`container-fluid` was originally taken out of Bootstrap 3.0, but [**added back in 3.1.1**][container commit]

To fix this, you can *either*:

1. Use the [newer version of Bootstrap style sheet][bootstrap.css]

    ### [Demo with New Style Sheet in Fiddle][fiddle style]

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][fiddle class]

[container commit]: https://github.com/twbs/bootstrap/commit/6273604601c58284f49b38ae4e52533b9689437c
[bootstrap.css]: http://getbootstrap.com/dist/css/bootstrap.css
[fiddle style]: http://jsfiddle.net/KyleMit/p23EB/7/
[fiddle class]: http://jsfiddle.net/KyleMit/p23EB/8/

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](http://jsfiddle.net/KyleMit/p23EB/1/)

When I see the result in browser I get a horizontal scrollbar.

Why is this happening? 

What am I doing wrong? 


using container-fluid within bootstrap cause horizontal scrollbar

Answer

Demo with New Style Sheet in Fiddle

Demo with Custom container class in Fiddle