title: top 2 images figcatpion hide when i position header fixed
body: <p>I am trying to make website but problem is that when i position header fix top 2 images figcatipion hide. I am trying to make website but problem is that when i position header fix top 2 images figcatipion hide.</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>/*********************
  General
  *********************/
  * {
   box-sizing: border-box;
  }
  
  body {
   font-family: sans-serif;
  }
  a {
   text-decoration: none;
  }
  
  h1, h3 {
   margin: 0;
  }
  
  /*********************
  Header
  *********************/
  .main-header {
   background-color: #3cb371;
   width: 100%;
   float: left;
   text-align: center;
   position: fixed;
   z-index: 1000;
  }
  
  .logo {
   font-family: 'Indie Flower', cursive;
  }
  .name {
   padding-top: 5px;
  }
  .occptn {
   padding-bottom: 15px;
   font-size: 15px;
  }
  .main-header a {
   color: #fff;
   margin: 0;
  }
  
  .main-nav {
   background-color:#2e8b57;
   font-weight: bold;
  }
  
  .main-nav a {
   text-align: center;
  }
  
  .main-nav li {
   display: inline-block;
    padding: 15px;
   
  }
  
  .selected a:visited {
   color: #000;
  }
  
  .main-nav a:hover {
   color: #000;
  }
  
  /*********************
  Images
  *********************/
  
  .container figure {
   margin: 0;
   float: left;
    width: 45%;
   padding: 0 20px ;
   
  }
  
  .container img {
   max-width: 100%;
   display: block;
   
  }
  
  .container figcaption {
   clear: right;
   background-color: #dcdcdc;
   padding: 10px 0;
   font-size: .8em;
   }
   
   .figureOne , 
   .figureTwo {
    
   }
  
  .clearfix::after {
    content: “”;
    display: table;
    clear: both;
  }
  
  /*********************
  Footer
  *********************/
  .main-footer {
   text-align: center;
   width: 100%;
   background-color:   #7fffd4;
   clear: left;
   padding: 20px;
  }
  .main-footer a {
   
  }
  /*********************
  Responsive Layout
  *********************/
  
  @media (min-width:660px) {
   
   .main-header {
    padding: 10px 0;
    box-shadow: 0 5px #2e8b57;
   }
   
   .logo {
    float: left;
    width: 45%;
    text-align: left;
    padding-left: 20px;
    
   }
   
  
   .main-nav {
    background-color: #3cb371;
    float: right;
    width: 45%;
   }
   
   .main-nav li {
    
    padding-left: 10px ;
   }
   
   .occptn {
    padding: 0;
   }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE HTML&gt;
  &lt;html lang="en-US"&gt;
  &lt;head&gt;
   &lt;meta charset="UTF-8"&gt;
   &lt;title&gt;Irfan Hussain | Web Developer&lt;/title&gt;
   &lt;link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet"&gt; 
   &lt;link rel="stylesheet" href="normalize.css" /&gt;
   &lt;link rel="stylesheet" href="style.css" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;!-- Start Header --&gt;
   &lt;header class="main-header"&gt;
     &lt;a class="logo" href="index.html"&gt;
    &lt;h1 class="name"&gt; Irfan Hussain &lt;/h1&gt; 
    &lt;h3 class="occptn"&gt;  Web Developer &lt;/h3&gt;
    &lt;/a&gt;
    &lt;ul class="main-nav"&gt;
     &lt;li class="selected"&gt;&lt;a href="index.html"&gt;Portfolio&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="about.html"&gt;About&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="contact.html"&gt;Contact&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
   &lt;/header&gt; 
   &lt;!-- End Header --&gt;
   &lt;div class="container clearfix"&gt;
   &lt;figure class="figureOne"&gt; 
   &lt;figcaption&gt; Experimentation with color and texture. &lt;/figcaption&gt; 
   &lt;img src="img/numbers-01.jpg" alt="Irfan Web Developer" /&gt;
   &lt;/figure&gt;
   
   &lt;figure class="figureTwo"&gt;
   &lt;figcaption&gt; Playing with blending mode in photoshop. &lt;/figcaption&gt;
   &lt;img src="img/numbers-02.jpg" alt="Irfan Web Developer" /&gt;
   &lt;/figure&gt;
   
   &lt;figure&gt;
   &lt;figcaption&gt; Trying to create 80's style glow. &lt;/figcaption&gt;
   &lt;img src="img/numbers-06.jpg" alt="Irfan Web Developer" /&gt;
   &lt;/figure&gt;
   
   &lt;figure&gt;
   &lt;figcaption&gt; Drips created using Photoshop brushes &lt;/figcaption&gt; 
   &lt;img src="img/numbers-09.jpg" alt="Irfan Web Developer" /&gt;
   &lt;/figure&gt;
   
    &lt;figure&gt; 
   &lt;figcaption&gt; Creating shapes using repetition. &lt;/figcaption&gt;
   &lt;img src="img/numbers-12.jpg" alt="Irfan Web Developer" /&gt;
    &lt;/figure&gt;
   &lt;/div&gt;
   
   &lt;footer class="main-footer"&gt; 
   &lt;p&gt; &amp;copy2018 Copy right Irfan Hussain | Web Developer &lt;/p&gt;
   &lt;a href="https://www.facebook.com"&gt; &lt;img src="img/facebook-wrap.png" alt="Facebook" /&gt; &lt;/a&gt;
   &lt;a href="https://www.twitter.com"&gt; &lt;img src="img/twitter-wrap.png" alt="Twitter" /&gt; &lt;/a&gt;
   &lt;/footer&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I am trying to make website but problem is that when i position header fix top 2 images figcatipion hide.</p>