How to get an image and H1 on the same line
<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>