title: Div overlapping Bootstrap Column
body: <p>I'm just starting to use Bootstrap.  Building my own page from scratch with it.</p>
  
  <p>The problem I have is a div is overflowing a bootstrap container.</p>
  
  <p>I don't know if I am designing this well in terms of how many columns I should be using or using a column instead of a div in some cases, I don't really understand the fine line yet between adding plain html inside columns and if I need nested Bootstrap columns, or if I'm going way overboard or not with columns and rows or if I dno't have enough...trying to understand that.  Because I could put a ton in ONE column but does one wanna do that, probably not and I'm trying to understand why or why not.</p>
  
  <p>So obviously this is not fully responsive.</p>
  
  <p>Anyway here is my code, and an image showing the overflow.</p>
  
  <p><img src="https://i.stack.imgur.com/6Yq7P.png" alt="Full Screen"></p>
  
  <p><img src="https://i.stack.imgur.com/Ni4Hi.png" alt="Shrunk Browser"></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --&gt;
  
      &lt;title&gt;A Title&lt;/title&gt;
  
      &lt;link href="../../../content/bootstrap/css/bootstrap.min.css" rel="stylesheet"&gt;
      &lt;link href="../../../content/bootstrap/css/sticky-footer.css" rel="stylesheet"&gt;
  
      &lt;!-- WARNING: Respond.js doesn't work if you view the page via file:// --&gt;
      &lt;!--[if lt IE 9]&gt;
        &lt;script src="../../../content/bootstrap/js/html5shiv.min.js"&gt;&lt;/script&gt;
        &lt;script src="../../../content/bootstrap/js/respond.min.js"&gt;&lt;/script&gt;
      &lt;![endif]--&gt;
  
      &lt;style&gt;
  
          body 
          {
              margin: 0;
              padding: 0;
          }
  
          .nopadding 
          {
             padding: 0 !important;
          }
  
          .padding-top-bottom-5
          {
              /* when to use important in bootstrap? */
             padding-top: 5px !important;
             padding-bottom: 5px !important;
          }
  
          .padding-left-5
          {
             padding-left: 5px !important;
          }
  
          .float-left{float: left;}
  
          .margin-5 { margin: 5px;}
          .margin-right-10 {margin-right: 10px;}
          .margin-2
          {
              margin: 2px !important;
          }
  
          .margin-left-5
          {
              margin: 2px !important;
          }
  
          p {
              font-size: 1em;
              line-height: 1.25em;
              text-align: justify;
              word-wrap: break-word;
           }
  
          .italic
          {
              font-style: italic;
          }
  
          .font-xsmall
          {
              font-size: 13px;
          }
  
          .bold
          {
              font-weight: bold;
          }
  
          #castMetaList li
          {
              display: inline;
              list-style-type: none;
              padding-right: 10px;
          }
  
          .vtop
          {
              vertical-align: top;
              float: left;
          }
  
          .inline-block
          {
              display: inline-block;
          }
  
          .show-Details
          {
              float: right; 
          }
  
          .cast-description 
          {
              margin: 10px 0px 0px 0px;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;nav class="navbar navbar-inverse navbar-fixed-top"&gt;
          &lt;div class="container-fluid"&gt;
              &lt;div class="navbar-header"&gt;&lt;img src="../../../Images/fullLogo_noBackground.png" /&gt;
                  &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"&gt;
                      &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;/button&gt;
              &lt;/div&gt;
              &lt;div id="navbar" class="navbar-collapse collapse"&gt;
                  &lt;ul class="nav navbar-nav navbar-right"&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Dashboard&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Settings&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Profile&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Help&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/nav&gt;
  
      &lt;div class="row"&gt;
          &lt;div class="col-sm-12 well"&gt;
              &lt;div id="navbar2" class="navbar-collapse collapse"&gt;
                  &lt;ul class="nav navbar-nav navbar-left"&gt;
                      &lt;li&gt;&lt;a href="#"&gt;&lt;span class="glyphicon glyphicon-home"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Donate!&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;&lt;span class="glyphicon glyphicon-search" aria-hidden="true"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Profile&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Help&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="container-fluid well"&gt;
  
          &lt;div class="row"&gt;
              &lt;div class="col-sm-3 col-md-2 sidebar well"&gt;
                  Getting Around
                  &lt;ul class="nav nav-sidebar well"&gt;
                      &lt;li class=" "&gt;&lt;a href="#"&gt;Authors &lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Recent shows&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Popular shiows&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
  
              &lt;div class="col-lg-9 well"&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col-sm-4 col-md-9 col-lg-12 well margin-2 padding-top-bottom-5"&gt;
                          &lt;div class="row"&gt;
                              &lt;div class="col-xsm-4 col-sm-6 col-md-9 col-lg-12 well padding-top-bottom-5"&gt;
                                  &lt;img src="../../../Images/CastThumbs/episode206.jpg" class="vtop margin-right-10" /&gt;
                                  &lt;div class="show-Details"&gt;
                                      &lt;span class="bold"&gt;The Title&lt;/span&gt;
                                      &lt;p class="cast-description"&gt;
                                          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. 
                                      &lt;/p&gt;
                                  &lt;/div&gt; 
                              &lt;/div&gt;
                              &lt;div class="col-xsm-4 col-sm-6 col-md-9 col-lg-12 well padding-top-bottom-5"&gt;
                                  &lt;p&gt;
                                      &lt;ul class="list-unstyled" id="castMetaList"&gt;
                                          &lt;li&gt;2/17/2015&lt;/li&gt;
                                          &lt;li&gt;Author: Some Dude&lt;/li&gt;
                                      &lt;/ul&gt;
                                  &lt;/p&gt;
                              &lt;/div&gt;
                              &lt;div class="col-xsm-4 col-sm-6 col-md-9 col-lg-12 well padding-top-bottom-5"&gt;
                                  More details about this episode
                              &lt;/div&gt;
                              &lt;div class="col-xsm-4 col-sm-6 col-md-9 col-lg-12 well padding-top-bottom-5"&gt;
                                  Watch this episode
                              &lt;/div&gt;
                              &lt;div class="col-xsm-4 col-sm-6 col-md-9 col-lg-12 well padding-top-bottom-5"&gt;
                                  &lt;img src="../../../Content/Bootstrap/fake_ad.jpg" width="468" height="60" /&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
  
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;footer class="footer"&gt;
          &lt;div class="container"&gt;
              &lt;h1&gt;Footer&lt;/h1&gt;
          &lt;/div&gt;
      &lt;/footer&gt;
  
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>