title: How to align the h1 tag and the image tag on one line adjacently?
body: <p>I have problems with trying to align the image and the h1 tag together on one line. I tried display: inline and inline-block they didn't work and only made the container of the two. I added the width to 100% on the section and still nothing. Float doesn't work either and if it did, it screws up the alignment of the page. What am I doing wrong? Check my full source code here: <a href="http://jsfiddle.net/TheAmazingKnight/bkmyv/" rel="nofollow">http://jsfiddle.net/TheAmazingKnight/bkmyv/</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;section&gt;
      &lt;img id="me" src="assets/img/pose1.jpg" alt="A photo of me." /&gt;
      &lt;h1&gt;FOLLOW ME ON...&lt;/h1&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>section{
  display:inline-block;
  width:100%;
  }
  h1{
  font-weight:bold;
  font-size:40px;
  color:#FFFFFF;
  background-color:#FFB405;
  display:inline-block;
  }
  </code></pre>