title: Image causing other objects to move
body: <p>After inserting an image into my template, a set of boxes further down the page seem to have drifted out of sync with the rest of the template and I'm baffled as to why. I have tried messing with certain padding and margins and can't seem to keep the image along with the correct alignment.</p>
  
  <p><strong>The Code</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="SuperContentsWrapper"&gt;
    &lt;div id="SuperContents"&gt;
      &lt;div id="SuperContentsSub"&gt;
        &lt;h1&gt;
          &lt;div align="center"&gt;
            &lt;font color="#A35E41"&gt;&lt;em&gt;&lt;font color="#000000"&gt;Batman Vs Superman Boys' T-Shirt&lt;/font&gt;&lt;/em&gt;&lt;/strong&gt;&lt;/font&gt;
          &lt;/div&gt;
        &lt;/h1&gt;
      &lt;p&gt;
      &lt;div align="center"&gt; &lt;img src="http://nutty-squirrel.co.uk/Kieran%20Completed%20SKU%20/Batman%20Test.png?" height="100%" width="100%"&gt;
        &lt;p&gt;
        &lt;div align="center"&gt;
          &lt;font size="3"&gt;Great for all occasions, this Batman Boys T-Shirt will receive a great reception anywhere. This T-Shirt looks and feels great and is made with 100% innovative SofSpun Cotton and has a longer-line for a more fashionable looking T-Shirt.&lt;/font&gt;
        &lt;/div&gt; 
        &lt;p&gt; &lt;/p&gt;
        &lt;div align="center"&gt;Brand: Fruit Of The Loom &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The image causing the issue is: <code>&lt;div align="center"&gt; &lt;img src="http://nutty-squirrel.co.uk/Kieran%20Completed%20SKU%20/Batman%20Test.png?" height="100%" width="100%"&gt;</code></p>
  
  <p>Please let me know if there is anymore code needed to understand why this is happening!</p>