title: Displaying content below a fixed header
body: <p>My page has a fixed header, I am aware that this causes <strong>content flows to begin at the top of the page</strong>. I've been searching for a workaround for this and nothing seems to be working, for example <a href="https://stackoverflow.com/questions/25553573/adding-elements-after-fixed-header">this one</a></p>
  
  <p>Below is the code  and here is a <a href="https://codepen.io/jordan_miguel/pen/wrPaRQ?editors=1100" rel="noreferrer">codepen</a> - As you can see the content in my <code>article</code> is being displayed at the top of the page, although it is place at the bottom of my html.</p>
  
  <p><strong>I'd appreciate an explained workaround so that I can LEARN.</strong></p>
  
  <p><strong>UPDATE</strong> - adding <code>padding-top:{500px}</code> successfully fixed this issue. Is this a recommended workaround? I was made aware of this fix <a href="https://teamtreehouse.com/community/div-hidden-below-fixed-position-navbar-clearfix-issues-with-css" rel="noreferrer">here</a>.</p>
  
  <p>Thanks guys!</p>
  
  <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>*,
  *:before,
  *:after {
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
  }
  
  body {
    margin: 0;
  }
  
  .col-1 {
    width: 100%;
  }
  
  .inline-block-container&gt;* {
    display: -moz-inline-stack;
    display: inline-block;
  }
  
  ul,
  ol {
    list-style: none;
    margin: 0px;
    padding: 0px;
  }
  
  .wrapper {
    position: fixed;
    height: 100px;
    width: 100%;
    top: 0;
    z-index: 99;
  }
  
  .header {
    width: 100%;
    top: 0;
    border-bottom: 1px solid #ddd;
    background-color: white;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
  }
  
  .header .logo a img {
    width: 150px;
    height: 49px;
  }
  
  .logo {
    margin-left: 40px;
  }
  
  .menu li {
    padding-right: 50px;
    margin-right: 20px;
  }
  
  .header .menu ul {
    margin: 0;
    padding: 0;
  }
  
  .header .menu ul li {
    display: inline-block;
    list-style: none;
  }
  
  .header .menu ul li a {
    text-decoration: none;
    display: block;
    padding: 30px 20px;
  }
  
  .site-content {
    margin-top: 100px;
  }
  
  .banner-home {
    background: url("");
    height: 100vh;
    width: 100%;
    background-size: cover;
    position: absolute;
    z-index: -1000;
  }
  
  #intro {
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
    color: #020000;
    z-index: 50;
  }
  
  #intro a {
    border: 3px solid #020000;
    cursor: pointer;
  }
  
  #intro li a {
    padding: 20px;
    color: #020000;
    font-weight: 800;
  }
  
  #intro li a:hover {
    background-color: #ffd800;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="page" class="rare-site"&gt;
    &lt;div class="wrapper"&gt;
      &lt;div id="global-navigation"&gt;
        &lt;!-- Global Header --&gt;
        &lt;header class="header"&gt;
          &lt;div class="logo"&gt;
            &lt;a href=""&gt;
              &lt;!--&lt;img src="images/rare-logo.png"&gt;--&gt;
              &lt;h1&gt;Rare Select&lt;/h1&gt;
            &lt;/a&gt;
          &lt;/div&gt;
          &lt;nav class="menu"&gt;
            &lt;ul&gt;
              &lt;li&gt;&lt;a href=""&gt;HOME&lt;/a&gt;&lt;/li&gt;
              &lt;!-- 
            --&gt;
              &lt;li&gt;
                &lt;div class="flexbox-container"&gt;
                  &lt;a href=""&gt;INFO&lt;/a&gt;
  
              &lt;/li&gt;
              &lt;!--
            --&gt;
              &lt;li&gt;
                &lt;div class="flexbox-container"&gt;
                  &lt;a href=""&gt;NEWSLETTER&lt;/a&gt;
                &lt;/div&gt;
                &lt;!--
            --&gt;
                &lt;li&gt;
                  &lt;div class="flexbox-container"&gt;
                    &lt;a href=""&gt;CONTACT&lt;/a&gt;
                &lt;/li&gt;
                &lt;!--
            --&gt;
            &lt;/ul&gt;
        &lt;/header&gt;
        &lt;/div&gt;
        &lt;/div&gt;
        &lt;div id="content" class="site-content"&gt;
          &lt;div id="primary" class="content-area"&gt;
            &lt;!-- Content Area --&gt;
            &lt;main id="main" class="site-main" role="main"&gt;
              &lt;div class="banner large-trunk"&gt;
                &lt;div class="banner-home"&gt;&lt;/div&gt;
                &lt;div class="banner-overlay"&gt;
                  &lt;div id="intro"&gt;
                    &lt;h2 class="discover"&gt;&lt;u&gt;The easy way to discover models.&lt;/u&gt;&lt;/h2&gt;
                    &lt;div id="button-container"&gt;
                      &lt;div id="button-overlay"&gt;
                        &lt;ul class="inline-block-container"&gt;
                          &lt;li&gt;&lt;a class="discover-1"&gt;I'm looking to become a model&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a class="discover-2"&gt;I'm looking for a model&lt;/a&gt;&lt;/li&gt;
                        &lt;/ul&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;article id="newsletter"&gt;
                &lt;div class="newsletter-entry"&gt;
                  &lt;section class="news-content trunk"&gt;
                    &lt;div class="feature-box"&gt;
                      &lt;h2&gt;Recent News&lt;/h2&gt;
                    &lt;/div&gt;
                  &lt;/section&gt;
                &lt;/div&gt;
              &lt;/article&gt;
            &lt;/main&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>