title: Error at my logo beside the text
body: <p>I'm currently learning basic html. What's wrong with my code, why the logo is appearing on the right side of the text but I already assigned it on the left side.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  
  &lt;title&gt;Registration Form&lt;/title&gt;
  
  &lt;center&gt;
      &lt;h3&gt;
          &lt;font color="336699"&gt;
              Asia Pacific College
              &lt;img src="Asia_Pacific_College_Logo.png" style="width:32px;height:32px;" vertical- align="left"&gt;
          &lt;/font&gt;
      &lt;h3&gt;
      &lt;h4&gt;
          &lt;font color="336699"&gt;Office of the Registrar&lt;/font&gt;
      &lt;h4&gt;
  &lt;/center&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Which results in:</p>
  
  <p><img src="https://i.imgur.com/UArK2uq.png" alt=""></p>