title: How to get an image and H1 on the same line
body: <p>I have a logo (<code>figure</code>) for a website that I need to put on the same line as the <code>h1</code> heading. Does anyone have suggestions? Here is something I recently tried:</p>
  
  <pre><code>figure {
    float: left;
    padding-left: 2px;
  }
  
  h1 {
    text-align: center;
    border: 3px solid: #FFA500;
    border-radius: 15px;
    box-shadow: 5px 5px 5px #828282;
  }
  header {
    text-align: center;
    letter-spacing: 1px;
    height: 8em;
    padding: 2em 10%;
  }
  
  
  
  
              &lt;title&gt;Kumquats&lt;/title&gt;
         &lt;link rel="stylesheet" href="css/styles.css"&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
    &lt;div id="wrapper"&gt;
       &lt;header&gt;
         &lt;figure&gt;
           &lt;a href="index.html"&gt;
                 &lt;img src="img/kumquatlogo.gif"                 alt="kumquat                   logo"                                  width="75"               height="75"&gt;
         &lt;/figure&gt;
           &lt;/a&gt;
          &lt;h1&gt;Kumquat Central&lt;/h1&gt;
  </code></pre>
  
  <p>I want a logo image to be at the top of a webpage, next to an <code>h1</code> element of text. The <code>figure</code> and the <code>h1</code> are contained inside of a header, that is why I have header code there.</p>