title: Bootstrap grid columns overlapping each other
body: <p>I have an issue with Bootstrap's grid layout and the overlapping of columns within it. I'm not sure what the issue is really, any advice would be most appreciated, thanks.  </p>
  
  <pre><code>&lt;div class="container"&gt;    
  
      &lt;div class="row"&gt;
          &lt;div class="col-md-6"&gt;
              &lt;img src="content/one.png"&gt;
          &lt;/div&gt;
  
          &lt;div class="col-md-6"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-md-6"&gt;&lt;img src="content/two.png"&gt;&lt;/div&gt;
                  &lt;div class="col-md-6"&gt;&lt;img src="content/three.png"&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-md-6"&gt;&lt;img src="content/four.png"&gt;&lt;/div&gt;
                  &lt;div class="col-md-6"&gt;&lt;img src="content/five.png"&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="col-md-9"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-md-3"&gt;&lt;img src="content/six.png"&gt;&lt;/div&gt;
                  &lt;div class="col-md-9"&gt;&lt;img src="content/seven.png"&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-md-6"&gt;&lt;img src="content/eight.png"&gt;&lt;/div&gt;
                  &lt;div class="col-md-6"&gt;&lt;img src="content/nine.png"&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-md-3"&gt;
              &lt;img src="content/ten.png"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>Screenshot of the grid - <a href="http://i.stack.imgur.com/a3YBr.jpg" rel="noreferrer">http://i.stack.imgur.com/a3YBr.jpg</a></p>