title: CSS h1 positioning
body: <p>I'm trying to get the text that says "Test" inside of the white DIV, beside the compass logo. I'm not sure what I'm doing wrong here or how to work around this. Here's an image of what it's looking like: <a href="http://imgur.com/y1Jan8B" rel="nofollow">http://imgur.com/y1Jan8B</a></p>
  
  <p>Here's my CSS:</p>
  
  <pre><code>#nav{
  clear: both;
  margin-top: 20px;
  background-color: #FFF;
  width: 45%;
  height: 75px;
  margin-right: auto;
  margin-left: auto;
  border-radius: 5px;
  -webkit-box-shadow: 0px 6px 5px 0px rgba(48, 50, 50, 0.46);
  -moz-box-shadow:    0px 6px 5px 0px rgba(48, 50, 50, 0.46);
  box-shadow:         0px 6px 5px 0px rgba(48, 50, 50, 0.46);
  }
  img.logo{
  margin-top: -15px;
  display: inline;
  }
  h1.title{
  font-family: 'Lato', sans-serif;
  font-weight: 900;
  font-size: 2.5em;
  color: #FFEA00;
  display: inline;
  }
  </code></pre>
  
  <p>and HTML</p>
  
  <pre><code>&lt;div id="nav"&gt;
      &lt;img class="logo" src="images/compass.png" alt="Compass" /&gt;
      &lt;h1 class="title"&gt;Test&lt;/h1&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Thanks in advance</p>