title: fixed header goes under an element
body: <p>My fixed header goes under the article tag with class "huge-box" <a href="https://i.stack.imgur.com/8nUIK.png" rel="nofollow noreferrer">see the image</a> i can't really figured out what is the problem... i tried reconstructing the html but it still do the same thing..</p>
  
  <p>Here's the css of that header</p>
  
  <pre><code>.navs {
      position: fixed;
      margin-top: 30px;
      width: 100%;
      background-color: #FFFFFF;
      max-height: 50px;
      height: 50px;
  }
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>*{
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      -o-box-sizing:border-box;
  }
  
  a{
      text-decoration: none;
  }
  body{
      background-color: #F5F5F5;
      font-family: 'Maquette-regular', sans-serif;
  }
  ul{
      padding: 10px;
  }
  .header{
      background-color: #131313;
      max-height: 32px;
      display: block;
      font-size: 13px;
  
  }
  
  
  .header:after { content: ""; clear: both; display: block; }
  
  .item{
      display: inline-block;
      color: rgba(255,255,255,.6);
      margin-left: 15px;
  }
  
  .item:hover{
      color: silver;
      cursor: pointer;
  }
  
  
  
  .right-nav{
      float: right;
  
  }
  
  .left-nav{
      float: left;
  
  }
  
  .item-list{
  
  }
  
  .navs{
      position: fixed;
      margin-top: 30px;
      width: 100%;
      background-color: #FFFFFF;
      max-height: 50px;
      height: 50px;
  }
  
  .categories{
      color: silver;
      display: inline-block;
   /* line-height: 4em; */
      margin: 20;
      font-size: 15px;
  }
  
  .categories:hover{
      color: #000000;
      cursor: pointer;
  }
  .fa{
      color: silver;
      padding: 5px;
      font-size: 20px;
  }
  
  .social-btn .fa:hover{
      color: #808080;
      cursor: pointer;
  }
  .fa-search{
      border-left: 1px solid #EEEEEE;
  }
  
  .social-btn{
      float: right;
      padding: 10px;
  }
  
  .cover-img{ 
      background: linear-gradient(160deg, rgba(191, 0, 71, 0.9) 0%, transparent 50%), linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, transparent 100%), url(https://cdn2.tnwcdn.com/wp-content/blogs.dir/1/files/2017/06/Screen-Shot-2017-06-27-at-16.59.59-796x462.png) no-repeat;
      background-size: cover;
      width: 100%;
      height: 100%;
      position: relative;
  }
  
  .articles-box{
      outline: 1px solid;
      height: 75vh;
      max-height: 560px;
      margin-top: 55px;
  }
  
  .huge-box{
      background-color: grey;
      width: 66.66666%;
      height:  90%;
      margin: 10px;
  }   
  
  .tnw-logo{
      background: url(../images/logo.svg) no-repeat;
      background-size: contain;
      left: 24px;
      top: 105px;
      max-width: 50%;
      height: 100%;
      max-height: 112px;
      line-height: 1;
      pointer-events: none;
      text-align: right;
      position: absolute;
      color: #FFF;
      z-index: 5;
      right: 24px;
  }
  
  .article-date{
      position: absolute;
      color: #fff;
      top: 110px;
      left: 620px;
      font-size: 15px;
  }
  
  .article-about{
      position: relative;
      margin-top: -250px;
      width: 100%;
      padding: 15px;
  }
  .article-info{
      color: #fff;
      position: relative;
      margin: 0px 15px 0px;
  
  }
  .article-category{
      text-decoration: none;
      color: #fff;
      font-size: 20px;
  
  }
  
  #article-author{
      font-size: 14px;
      color: silver;
  }
  
  #article-author a{
      text-decoration: none;
      color: rgba(255,255,255,.6);
      font-size: 12px;
  }
  
  #article-author a:hover{
      color: silver;
  }
  .article-info .fa-clock-o, .article-info .fa-share-alt{
      font-size: 12px;
      color: rgba(255,255,255,.6);
  }
  
  
  
  .article-title{
      color: #fff;
      font-size: 55px;
      font-weight: 700;
  }
  
  .cover-img-small{
      background: linear-gradient(550deg, rgb(0, 0, 0) 0%, transparent 50%), linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.09) 100%), url("https://cdn2.tnwcdn.com/wp-content/blogs.dir/1/files/2017/06/galaxy-note7_design-phone2-796x437.png") no-repeat;
      background-size: cover;
      width: 100%;
      height: 100%;
  }
  
  .cover-img-small-2{
      background: linear-gradient(550deg, rgb(72, 62, 13) 0%, transparent 50%), linear-gradient(to top, rgba(163, 175, 67, 0.9) 0%, rgba(0, 0, 0, 0.09) 100%), url(https://cdn2.tnwcdn.com/wp-content/blogs.dir/1/files/2017/06/Ransomware-Locked-PC-Computer-Security-796x398.jpg) no-repeat;    background-size: cover;
      width: 100%;
      height: 100%;
  }
  
  .small-box{
      width: 31.3333%;
      height: 45%;
      /* outline: 1px solid red; */
      float: right;
      margin: -484px 8px 0px 0px;
  }
  
  
  .small-box-2{
      width: 31.3333%;
      height: 45%;
      /* outline: 1px solid red; */
      float: right;
      margin: -246px 8px 0px 0px;
  }
  
  .article-category-small, .article-category-small-2{
      text-decoration: none;
      color: #fff;
  
  }
  
  .article-about-small{
      margin-top: -200px;
      padding: 25px;
  }
  
  .article-about-small-2{
      padding: 25px;
      margin-top: -195px;
  }
  
  .article-title-small, .article-title-small-2{
      font-size: 30px;
      color: #fff;
  }
  
  
  .article-info-small{
      margin-top: -25px;
      margin-left: 25px;
  }
  
  .article-info-small-2{
      margin-left: 25px;
      margin-top: -25px;
  }
  
  #article-author-small, #article-author-small-2{
      color: silver;
  }
  
  #article-author-small a, #article-author-small-2 a{
      color: silver;
      font-size: 12px;
  }
  
  
  .article-info-small .fa-clock-o, .article-info-small .fa-share-alt , .article-info-small-2 .fa-clock-o, .article-info-small-2 .fa-share-alt{
      font-size: 12px;
      color: rgba(255,255,255,.6);
  }
  
  .adbar{
      max-height: 95px;
      max-width: 550px;
      height: 100%;
      width: 100%;
      background-color: #5a4646;
  }
  
  
  #adspace{
      display: block;
      margin: 0px 250px 0px 250px;
  }
  
  .article{
      background-color: grey;
      width: 250px;
      height: 150px;
      display: inline-block;
      /* margin: 15px; */
      margin-top: 35px;
      margin-left: 15px;
  }
  
  .related-articles{
      margin-left: 50px;
      padding: 15px;
  }
  
  .latest-news-link{
      color:#F42;
      font-size: 24px;
      text-decoration: none;
  }
  
  .article-1-title{
      margin-top: 165px;
  }
  
  .articles-info{
      margin-top: 10px;
  }
  
  #author, #post-time{
      color: #AAAAAA;
      font-size: 12px;
  }
  
  
  
  
  
  
  
  
  
  
  
  
  /* Media Queries */
  
  @media only screen and (min-width: 320px) {
      body:after {
          content: "320 to 480px";
          background-color: hsla(90,60%,40%,0.7);
      }
  }
  @media only screen and (min-width: 480px) {
      body:after {
          content: "480 to 768px";
          background-color: hsla(180,60%,40%,0.7);
      }
  }
  @media only screen and (min-width: 768px) {
      body:after {
          content: "768 to 1024px";
          background-color: hsla(270,60%,40%,0.7);
      }
  }
  @media only screen and (min-width: 1024px) {
      body:after {
          content: "1024 and up";
          background-color: hsla(360,60%,40%,0.7);
      }
  }
  @media only screen and (max-width: 767px) {
      .item-list {
          display: none;
      }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;title&gt; The Next Web | International &lt;/title&gt;
      &lt;link rel="stylesheet" href="./css/reset.css"&gt;
      &lt;link rel="stylesheet" href="./css/font-awesome/css/font-awesome.min.css"&gt;
      &lt;link rel="stylesheet" href="./css/main.css"&gt;
  &lt;/head&gt;
  
  
  &lt;body&gt;
  &lt;header class="header"&gt;
  &lt;nav class="item-list"&gt;
  
  &lt;div class="left-nav"&gt;
  &lt;ul&gt;
  &lt;li class="item"&gt; News &lt;/li&gt;
  &lt;li class="item"&gt; Conference &lt;/li&gt;
  &lt;li class="item"&gt; Index &lt;/li&gt;
  &lt;li class="item"&gt; TQ &lt;/li&gt;
  &lt;li class="item"&gt; Deals &lt;/li&gt;
  &lt;li class="item"&gt; Answers &lt;/li&gt;
  &lt;li class="item"&gt; Tech5 &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;div class="right-nav"&gt;
  &lt;ul&gt;
  &lt;li class="item"&gt; About &lt;/li&gt;
  &lt;li class="item"&gt; Team &lt;/li&gt;
  &lt;li class="item"&gt; Advertise &lt;/li&gt;
  &lt;li class="item"&gt; Jobs &lt;/li&gt;
  &lt;li class="item"&gt; Contact &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;/nav&gt;
  
  &lt;nav class="navs"&gt;
  &lt;div class="categories"&gt;
  CATEGORIES
  &lt;/div&gt;
  
  &lt;div class="social-btn"&gt;
    &lt;i class="fa fa-facebook-official" aria-hidden="true"&gt;&lt;/i&gt;
    &lt;i class="fa fa-twitter" aria-hidden="true"&gt;&lt;/i&gt;
    &lt;i class="fa fa-envelope" aria-hidden="true"&gt;&lt;/i&gt;
    &lt;i class="fa fa-ellipsis-h" aria-hidden="true"&gt;&lt;/i&gt;
    &lt;i class="fa fa-search" aria-hidden="true"&gt;&lt;/i&gt;
  &lt;/div&gt;
  &lt;/nav&gt;
  
  &lt;/header&gt;
  
  &lt;section class="articles-box"&gt;
  &lt;article class="huge-box"&gt;
  &lt;div class="cover-img" title="Google is bankrupt"&gt;
  &lt;/div&gt;
  &lt;div class="tnw-logo"&gt;&lt;/div&gt;
  &lt;span class="article-date"&gt;Wednesday — June 28, 2017&lt;/span&gt;
  &lt;div class="article-about"&gt;
  &lt;a href="#" class="article-category"&gt;TECH&lt;/a&gt;
  &lt;div class="article-title"&gt;Massive ransomware attack is causing chaos in airports, banks and more worldwide&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="article-info"&gt;
  &lt;span id="article-author"&gt; by &lt;a href="#"&gt; MIX &lt;/a&gt;&lt;/span&gt;
  &lt;i class="fa fa-clock-o" aria-hidden="true"&gt; 17 hours ago&lt;/i&gt;
  &lt;i class="fa fa-share-alt" aria-hidden="true"&gt; 1B+&lt;/i&gt;
  &lt;/div&gt;
  &lt;/article&gt;
  
  &lt;article class="small-box"&gt;
  &lt;div class="cover-img-small" title="who wants that"&gt;
  &lt;/div&gt;
  &lt;div class="article-about-small"&gt;
  &lt;a href="#" class="article-category-small"&gt;GEAR&lt;/a&gt;
  &lt;div class="article-title-small"&gt;Samsung is bringing back its Galaxy Note 7 for fans who aren't afraid of exploding phones&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="article-info-small"&gt;
  &lt;span id="article-author-small"&gt; by &lt;a href="#"&gt; Abhimanyu Ghoshal&lt;/a&gt;&lt;/span&gt;
  &lt;i class="fa fa-clock-o" aria-hidden="true"&gt; 6 hours ago&lt;/i&gt;
  &lt;i class="fa fa-share-alt" aria-hidden="true"&gt; 1B+&lt;/i&gt;
  &lt;/div&gt;
  &lt;/article&gt;
  
  &lt;article class="small-box-2"&gt;
  &lt;div class="cover-img-small-2" title="say whattttt"&gt;
  &lt;/div&gt;
  &lt;div class="article-about-small-2"&gt;
  &lt;a href="#" class="article-category-small-2"&gt;SECURITY&lt;/a&gt;
  &lt;div class="article-title-small-2"&gt;Petya ransomware victims can’t get their files back even if they pay up&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="article-info-small-2"&gt;
  &lt;span id="article-author-small-2"&gt; by &lt;a href="#"&gt; Abhimanyu Ghoshal&lt;/a&gt;&lt;/span&gt;
  &lt;i class="fa fa-clock-o" aria-hidden="true"&gt; 7 hours ago&lt;/i&gt;
  &lt;i class="fa fa-share-alt" aria-hidden="true"&gt; 1B+&lt;/i&gt;
  &lt;/div&gt;
  &lt;/article&gt;
  
  &lt;/section&gt;
  
  &lt;section id="adspace"&gt;
  &lt;div class="adbar"&gt;
  &lt;/div&gt;
  &lt;/section&gt;
  
  
  &lt;section class="related-articles"&gt;
  &lt;div class="latest-news"&gt;
  &lt;a href="#" class="latest-news-link"&gt;Latest news &gt; &lt;/a&gt;
  &lt;/div&gt;
  
  &lt;article class="article"&gt;
  &lt;h5 class="article-1-title"&gt;Tinder Gold lets you see who likes you without matching&lt;/h5&gt;
  &lt;div class="articles-info"&gt;
  &lt;span id="author"&gt; Rachel Kaser&lt;/span&gt;
  &lt;span id="post-time"&gt; 3 hours ago &lt;/span&gt;
  &lt;/div&gt;
  &lt;/article&gt;
  
  &lt;article class="article"&gt;
  &lt;h5 class="article-1-title"&gt;Tinder Gold lets you see who likes you without matching&lt;/h5&gt;
  &lt;div class="articles-info"&gt;
  &lt;span id="author"&gt; Rachel Kaser&lt;/span&gt;
  &lt;span id="post-time"&gt; 3 hours ago &lt;/span&gt;
  &lt;/div&gt;
  &lt;/article&gt;
  
  &lt;article class="article"&gt;
  &lt;h5 class="article-1-title"&gt;Tinder Gold lets you see who likes you without matching&lt;/h5&gt;
  &lt;div class="articles-info"&gt;
  &lt;span id="author"&gt; Rachel Kaser&lt;/span&gt;
  &lt;span id="post-time"&gt; 3 hours ago &lt;/span&gt;
  &lt;/div&gt;
  &lt;/article&gt;
  
  
  &lt;article class="article"&gt;
  &lt;h5 class="article-1-title"&gt;Tinder Gold lets you see who likes you without matching&lt;/h5&gt;
  &lt;div class="articles-info"&gt;
  &lt;span id="author"&gt; Rachel Kaser&lt;/span&gt;
  &lt;span id="post-time"&gt; 3 hours ago &lt;/span&gt;
  &lt;/div&gt;
  &lt;/article&gt;
  
  
  &lt;article class="article"&gt;
  &lt;h5 class="article-1-title"&gt;Tinder Gold lets you see who likes you without matching&lt;/h5&gt;
  &lt;div class="articles-info"&gt;
  &lt;span id="author"&gt; Rachel Kaser&lt;/span&gt;
  &lt;span id="post-time"&gt; 3 hours ago &lt;/span&gt;
  &lt;/div&gt;
  &lt;/article&gt;
  
  &lt;article class="article"&gt;
  &lt;h5 class="article-1-title"&gt;Tinder Gold lets you see who likes you without matching&lt;/h5&gt;
  &lt;div class="articles-info"&gt;
  &lt;span id="author"&gt; Rachel Kaser&lt;/span&gt;
  &lt;span id="post-time"&gt; 3 hours ago &lt;/span&gt;
  &lt;/div&gt;
  &lt;/article&gt;
  
  &lt;article class="article"&gt;
  &lt;h5 class="article-1-title"&gt;Tinder Gold lets you see who likes you without matching&lt;/h5&gt;
  &lt;div class="articles-info"&gt;
  &lt;span id="author"&gt; Rachel Kaser&lt;/span&gt;
  &lt;span id="post-time"&gt; 3 hours ago &lt;/span&gt;
  &lt;/div&gt;
  &lt;/article&gt;
  
  
  &lt;article class="article"&gt;
  &lt;h5 class="article-1-title"&gt;Tinder Gold lets you see who likes you without matching&lt;/h5&gt;
  &lt;div class="articles-info"&gt;
  &lt;span id="author"&gt; Rachel Kaser&lt;/span&gt;
  &lt;span id="post-time"&gt; 3 hours ago &lt;/span&gt;
  &lt;/div&gt;
  &lt;/article&gt;
  &lt;/section&gt;
  
  &lt;section class="funding-list"&gt;
  &lt;span class="latest-funding"&gt;Latest funding rounds on Index.co&lt;/span&gt;
  
  
  
  
  
  
  
  
  &lt;/section&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>