title: Images not properly aligned in html
body: <p>The last images and the text is not properly aligned. Here's the code:</p>
  
  <pre><code>&lt;html&gt;
  
  &lt;head&gt;
      &lt;title&gt;PODAR Ahmedabad!&lt;/title&gt;
  &lt;/head&gt;
  
  
  &lt;body bgcolor="BFFFC2"&gt;
      &lt;div id="main"&gt;
  
          &lt;hr size="7"&gt;
  
          &lt;div id="header"&gt;
  
          &lt;div align="left"&gt;
          &lt;img src="podar.jpg" width="25%" height="20%"&gt;
          &lt;/div&gt;
  
          &lt;h1 align="center"&gt;&lt;font size="7"&gt;&lt;font face="Papyrus"&gt;Welcome to &lt;/font&gt;&lt;b&gt;&lt;font color="34C510" face="SketchFlow Print"&gt; PODAR &lt;/font&gt;&lt;/b&gt;&lt;font face="Papyrus"&gt; ahmedabad!&lt;/font&gt;&lt;/font&gt;&lt;/h1&gt;
  
          &lt;div align="right"&gt;
          &lt;img src="school.jpg" width="25%" height="20%"&gt;
          &lt;/div&gt;
  
          &lt;/div&gt;
  
          &lt;hr size="7"&gt;
  
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p><a href="https://i.stack.imgur.com/R41oS.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/R41oS.jpg" alt="enter image description here"></a></p>
  
  <p>dimension of the first image is 300*105 and second image is 244*244</p>