title: How to make header cover entire page length?
body: <p>How do I make a header cover the contents and span the entire page length? When I use this css </p>
  
  <pre><code>#header {
      display: inline-block;
      background-color: #015367;
  }
  
  #login {
      color: #b92c2c;
      font-size: 1.25em;
      margin-left: 18em;
      position: relative;
      top: 16px;
      text-decoration: none;
  }
  
  #search-form {
      margin-left: 0.5em;
      margin-right: 15em;
      position: relative;
      top: 18px;
  }
  
  .lfloat {
      float: left;
  }
  
  .rfloat {
      float: right;
  }
  </code></pre>
  
  <p>with this html</p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="header"&gt;
          &lt;div id="page-nav" class="rfloat"&gt;
              &lt;a id="login" class="lfloat" href="/login"&gt;login&lt;/a&gt;
              &lt;form id="search-form" class="rfloat" action="search.py" method="get"&gt;
                  &lt;input id="searchbox" type="text" name="q" placeholder="search"/&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>I get this result (in firefox)
  <img src="https://i.stack.imgur.com/KCBA5.jpg" alt="html+css result"></p>
  
  <p>What do I need to change to get a proper header (like stackoverflow, facebook, etc)?</p>