title: Bootstrap - div spacing issues
body: <p><strong><em>Question background:</em></strong></p>
  
  <p>I am developing a site and have run into an issue with the responsive columns when the page is re-sized to a mobile device.</p>
  
  <p>The following screenshot shows the site when viewed on a browser fully expanded:</p>
  
  <p><img src="https://i.stack.imgur.com/1gI07.jpg" alt="enter image description here"></p>
  
  <p>This is fine and is spaced correctly, albeit slightly right aligned compared to the images above it.</p>
  
  <p><strong><em>The issues:</em></strong></p>
  
  <p>When the page is re-sized to a mobile device the horizontal <code>margin:auto</code> styling of the text is lost at the bottom of the div to the footer (as denoted by the blue arrow). There is also a margin issue between the bottom of the 'CSS3' image and the Top of the 'Test' text, as denoted by the green arrow. The space is too large compared to that of the horizontal break and the top pf the 'CSS3' image (red lines).</p>
  
  <p><img src="https://i.stack.imgur.com/2SkPY.jpg" alt="enter image description here"></p>
  
  <p><strong><em>HTML &amp; CSS:</em></strong></p>
  
  <p><strong>HTML markup:</strong></p>
  
  <pre><code> &lt;div class="col-md-12"&gt;
          &lt;div class="col-md-4 testImage"&gt;
              &lt;img src="~/Images/badge_css3.jpg" class="img-circle center-block" alt="CSS3"&gt;
          &lt;/div&gt;
  
          &lt;div class="col-md-8 testDescription pull-right"&gt;
              &lt;h2&gt;Test&lt;/h2&gt;
              Donec commodo fringilla risus ut tincidunt. Vivamus consectetur metus ex, vel fringilla dui venenatis nec. Quisque tempus in nunc vitae tempus. Curabitur at tempor ipsum. In lobortis, quam facilisis lobortis ultrices, nibh velit varius odio, sit amet accumsan odio nisl non ante. Nunc sollicitudin in urna et viverra. Duis tristique nunc a turpis viverra blandit. Maecenas blandit ultrices varius.
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS styling:</strong></p>
  
  <pre><code>.testDescription
  {
    margin:auto;
  }
  
  .testImage
  {
    padding-bottom:20px;
  }
  </code></pre>
  
  <p>Any advice sortng these issues out would be most welcome!</p>
  
  <p><strong>Edit:</strong></p>
  
  <p>From Christina's answer I was ableto resolve my issues:</p>
  
  <p><img src="https://i.stack.imgur.com/mj9lc.jpg" alt="enter image description here"></p>