title: How to make a fixed HTML header scroll horizontally with CSS?
body: <p>I have found this html code for making a HTML fixed header:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html lang="en"&gt;
     &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html"/&gt;
      &lt;meta charset="utf-8"/&gt;
      &lt;title&gt;NavBar&lt;/title&gt;
      &lt;link rel="stylesheet" type="text/css" href="style.css"/&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="navigation"&gt;
      &lt;div class="center"&gt;
          &lt;div class="logo"&gt;
          &lt;h1&gt;Logo&lt;/h1&gt;
      &lt;/div&gt;
      &lt;ul class="right"&gt;
          &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Portfolio&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Our Apps&lt;/a&gt;&lt;/bli&gt;
          &lt;li&gt;&lt;a href="#"&gt;Support&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Press&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="content"&gt;
      &lt;hgroup&gt;
          &lt;h1&gt;Hello&lt;/h1&gt;
          &lt;h2&gt;Hello again&lt;/h2&gt;
          &lt;h3&gt;And Again!&lt;/h3&gt;
      &lt;/hgroup&gt;
      &lt;article&gt;
          &lt;section&gt;
              &lt;p&gt;Testo Testo Testo Testo Testo Testo Testo Testo Testo     Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo &lt;/p&gt;
          &lt;/section&gt;
                      &lt;section&gt;
              &lt;p&gt;Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo &lt;/p&gt;
          &lt;/section&gt;
                          &lt;section&gt;
              &lt;p&gt;Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo &lt;/p&gt;
          &lt;/section&gt;          &lt;section&gt;
              &lt;p&gt;Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo &lt;/p&gt;
          &lt;/section&gt;
      &lt;/article&gt;
  &lt;/div&gt;
      &lt;/body&gt;
     &lt;/html&gt; 
  </code></pre>
  
  <p>This is the style.css file:</p>
  
  <pre><code>        body {
              padding:0;
              margin:0;
              font-family: Helvetica, Arial, sans-serif;
              font-size:12px;
      }
      #navigation {
              position:fixed;
              display:block;
              top: 0;
              width: 100%;
              height:35px;
              padding-top: 15px;
              -webkit-box-shadow: 0px 0px 8px 0px #000000;
              background-color: rgba(1,1,1,0.8);
              color:rgba(1,1,1,0.8);
              border-bottom:1px solid black;
      }
  
      .center {width: 1000px; margin: 0 auto;}
  
      div.logo {display:inline-block;
  
                       }
  
      .logo h1 {
              display:inline-block;
              margin:0;
              padding:0;
          color:white;
      }
  
      ul, li {
              padding:0;
              margin:0;
      }
      #navigation ul {
              list-style: none;
              float:right;
      }
      #navigation ul li {
              display:inline;
      }
  
      #navigation a {
              font-size:14px;
              padding: 0 15px;
              color:white;
              text-decoration:none;
      }
  
      #navigation a:hover {
              color:grey;
      }
      #content {
              width:800px;
              margin: 0 auto;
              margin-top:80px;
      }
  </code></pre>
  
  <p>The problem is that when I zoom-in the page, I only see the  element with  the "Logo" text, and I cannot scroll horizontally to see the links of the header while scrolling. 
  Just try this code and you'll know what I mean. How can I make the fixed header scroll horizontally?</p>