horizontal scrollbar appearing, row having negative margin

twitter-bootstrap, twitter-bootstrap-3

Solution

If you see the css of the `.row` class, it has the css properties:

margin-right: -15px;
margin-left: -15px;

This is why the horizontal bar is being created, because the above properties utilize more space.

For this reason, we wrap the `.row` class within the `.container` which has the properties:

padding-right: 15px;
padding-left: 15px;

Thus, this equals out the space and you won't see the horizontal scrollbar anymore.

So, your HTML should look like:

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

Updated Fiddle

Problem

I want to create layout like this link:http://deqsastudio.com/projects/screen.png but the problem horizontal Scrollbar on the bottom not fixed which is keep moving.Like this: Code: ``` <body> <!-- Header --> <div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <div id="header" class="row"> <div id="logo" class="col-md-3">LOGO</div> <div id="nav" class="col-md-9">NAV</div> </div> </div> </div> <!-- Body --> <div class="row nav-header"> <div class="container"> <div id="switch-btn" class="col-md-3">SWITCH BUTTON</div> <div id="search" class="col-md-9">SEARCH BUTTON </div> </div> </div> <div class="row"> <div class="container"> <div id="popular-categories" class="col-md-3 "><p>POPULAR CATEGORIES</p></div> <div id="banner-slide" class="col-md-9"><p>BANNER SLIDE</p></div> </div> </div> </body> <!-- Footer --> <div id="footer"> <div class="container"> <div class="row"> <div id="term" class="col-md-3">TERM & CONDITIONS </div> <div id="copyright" class="col-md-3 pull-right">COPYRIGHT</div> </div> </div> </div> ``` JSFiddle I hope my explanation explained well and understandable, Please help me on this :)

Original source