CSS Bootstrap: an horizontal scrollbar appears

Question

I'm trying Bootstrap on a small project, But there is something I don't understand or I should do wrong. Here is my snippet:

nav{
  background-color: lightblue;
}
section{
  background-color: lightgreen;
  }

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div id="wrapper">
  <header class="page-header"></header>
  <div id="mainContainer" class="row">
    <nav class="col-sm-12 col-md-2">
      <ul class="nav nav-pills nav-stacked">
        <li>Home</li>
        <li>Menu item 1</li>
        <li>Menu item 2</li>
      </ul>
    </nav>
    <section class="col-sm-12 col-md-10">
      Here is my content.
    </section>
  </div>
</div>

An horizontal scroll bar appears, how can I properly fix it, without adding external css rule, using only Bootstrap ones?

Answer 1

You need a use .container for a responsive fixed width Container. Add this class to your div

<div id="mainContainer" class="row container">

• Use .container for a responsive fixed width container.
• Use .container-fluid for a full width container, spanning the entire width of your viewport.

Answer 2

I believe you forgot your container.

nav{ background-color: lightblue; } section{ background-color: lightgreen; }

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div id="wrapper">
  <header class="page-header"></header>
  <div class="container">
  <div id="mainContainer" class="row">
    <nav class="col-sm-12 col-md-2">
      <ul class="nav nav-pills nav-stacked">
        <li>Home</li>
        <li>Menu item 1</li>
        <li>Menu item 2</li>
      </ul>
    </nav>
    <section class="col-sm-12 col-md-10">
      Here is my content.
    </section>
  </div>
  </div>
</div>