title: Aligning h1 with navigation bar
body: <p>Server side developer here, trying to teach myself some styling. </p>
  
  <p>I was trying to replicate the header section (<code>id=topbar</code>) from <a href="http://www.hanselman.com/" rel="nofollow">this site</a>. My initial efforts have failed to align the <code>h1</code> (scott hanselman) with the navigation list items (about , blog etc) - I was mostly experimenting with <code>float: left</code> and <code>display: inline</code> to overcome the block nature of the <code>h1</code> - I failed!</p>
  
  <p>On playing with the CSS in the chrome dev tools, I've not understood how he has aligned those items nicely in <code>containerInner</code>. I've found when I toggle the inherited <code>margin</code> property (line 4-9 of the css) the nav items fall below the <code>h1</code> as I would expect as a block element. </p>
  
  <p>My question is, what is making the <code>h1</code> not take all available horizontal space? Seems like my guess of <code>float</code> and <code>display</code> properties missed the mark.</p>
  
  <p>Here is my efforts thus far:
  HTML</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;first last&lt;/title&gt;
      &lt;link rel="stylesheet" href="blog_style.css" type="text/css" /&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div class="container"&gt;
          &lt;div class="top-ribbon-outer"&gt;
              &lt;div class="top-ribbon-inner"&gt;
                  &lt;h1&gt;first last&lt;/h1&gt;
                  &lt;nav&gt;
                      &lt;ul&gt;
                          &lt;li&gt;item1&lt;/li&gt;
                          &lt;li&gt;item2&lt;/li&gt;
                          &lt;li&gt;item3&lt;/li&gt;
                          &lt;li&gt;item4&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/nav&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>body {
      font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: 15px;
      margin-left: 50px;
  }
  
  .top-ribbon-outer {
      width: 100%;
      height: 50px;
      color: white;
      background-color: black;
      position: relative;
  }
  
  .top-ribbon-inner {
      height: 20px;
  }
  
  h1 { 
      margin-bottom: 0px;
      margin-top: 0px;
      float: left;
      /*display: inline;*/
  }
  
  li { 
      float: left;
      padding-left: 15px;
      padding-right: 15px;
  }
  
  ul {
      list-style-type: none;
  }
  </code></pre>