Bootstrap container running off the screen
<p>I'm trying to have the screen separated to two cols, one with width 9 and the other 3. On the right column I need a container to hold rows, but it seems that it doesn't want to stay in its col and it shoots off to the right.</p>

<p>If I take out the container, then all the buttons and things in that col become vertical, how can I prevent it from shooting off like that and keep the structure of the buttons to be horizontal?</p>

<p>Here's a small example:</p>

<p><a href="http://www.bootply.com/JfUvsLOmpj" rel="nofollow">http://www.bootply.com/JfUvsLOmpj</a></p>

<pre><code>&lt;div class="row"&gt;
  &lt;div class="col-md-9" id="boardArea"&gt;
    &lt;table id="board"&gt;&lt;/table&gt;
  &lt;/div&gt;
  &lt;div class="col-md-3"&gt;
    &lt;div class="container"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-md-3"&gt;
          &lt;div class="row" id="firstRow"&gt;
            &lt;div class="col-md-12"&gt;
              &lt;div id="controlPanel"&gt;
                &lt;div class="col-md-12  text-center"&gt;
                  &lt;button href="#" class="btn btn-default btn-sm" id="filled"&gt;Mark&lt;/button&gt;
                  &lt;button href="#" class="btn btn-default btn-sm" id="empty"&gt;Clear&lt;/button&gt;
                  &lt;button href="#" class="btn btn-default btn-sm" id="unknown"&gt;Unknown&lt;/button&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>PS: There are more rows on the same level as <code>firstRow</code>.</p>