title: Putting <nav> inline with <header> CSS
body: <p>First off, I learned most of what I know about CSS/HTML by using frameworks. I am trying to go back and learn the basics to understand the CSS selectors and inheritance. </p>
  
  <p>I have read on W3C that both  and  are good semantic markup for a header. So what I am trying to do is create a header with a logo floated left and a navigation menu floated right. The problem is my nav menu is sitting right below my header. I want to make this responsive. Here is what I have thus far. </p>
  
  <pre><code>&lt;body&gt;
  &lt;header&gt;
      &lt;h1&gt;Testing&lt;/h1&gt;
          &lt;nav&gt;
              &lt;ul&gt;
                  &lt;a href=""&gt;&lt;li&gt;Home&lt;/li&gt;&lt;/a&gt;
                  &lt;a href=""&gt;&lt;li&gt;About&lt;/li&gt;&lt;/a&gt;
                  &lt;a href=""&gt;&lt;li&gt;Contact&lt;/li&gt;&lt;/a&gt;
              &lt;/ul&gt;
          &lt;/nav&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p> </p>
  
  <p>The CSS is as follows</p>
  
  <pre><code>header {
      position:relative;
      display:block;
      max-width:100%;
      height:100%;
      margin:0 auto;
      padding:1rem 5rem;
      background:#cccccc;
      color:#fff;
  }
  header h1 {
      line-height: 45px;
      font-size: 2rem;
      margin: 0; 
  }
  nav {
      padding-left: 0;
      margin-bottom: 0;
      list-style: none;
      float:right;
  }
  
  nav  li {
      position:relative;
      display:inline-block;
      list-style-type: none;
      font-family: "Open Sans", "Droid Sans", Helvetica, Arial, sans-serif;
      color: #222;
      padding:0 1rem;
  }
  nav li &gt; a {
      position: relative;
      display: block;
      padding: 10px 15px;
  }
  nav &gt; li &gt; a:hover,
  nav &gt; li &gt; a:focus {
      text-decoration: none;
      background-color: #eee;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/Laktau5z/" rel="nofollow">JSFiddle</a></p>