title: Positioning of "logo" and "navbar" inside header
body: <p>This is killing me for hours already :'( Can anyone help me to position the logo and navbar inside the header???</p>
  
  <p>I am trying to put the "logo" inside the header (to the left side) and "navbar" inside the header (to the right side) but even though i tried many different properties my navbar is always outside of the header container... Header should be fixed.</p>
  
  <p><a href="http://jsfiddle.net/L7kPu/10/" rel="nofollow">http://jsfiddle.net/L7kPu/10/</a></p>
  
  <pre><code>&lt;header&gt;
          &lt;a href="#" id="logo"&gt;Logo&lt;/a&gt;
  
                      &lt;ul id="nav" class="nav"&gt;
                          &lt;li&gt;&lt;a href="#home"&gt;Home&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#about"&gt;About&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#services"&gt;Services&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#portfolio"&gt;Portfolio&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
  
  &lt;/header&gt;
  &lt;link href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,700' rel='stylesheet' type='text/css'&gt;
  
  html, body{
    margin:0px; padding:0px; height: 100%; }
  
  section {
      height: 100%;
  }
  
  header{
    z-index: 1;
    position:fixed; 
    width:100%;  
    background:rgba(0,0,0,0.1);
  }
  
  header ul{
      float:right;
  
  }
  
  header ul li{
      display: inline;
      float:left;
  
  }
  header a{
    color:white;
    background:rgba(0,0,0,0.1); 
    display:inline-block; 
    padding:0px 30px; 
    height:60px;
    line-height:60px; 
    text-align:center;
    font-family: 'Roboto Slab', serif; 
    text-decoration:none;
    text-transform:uppercase; 
    letter-spacing:2px; 
    font-weight:700;
  }
  </code></pre>