HTML/CSS: How to make a <div> containing an <img> tag inside a <section> responsive?
<p> I'm making a website using <a href="http://alvarotrigo.com/fullPage/" rel="nofollow">fullPage.js</a>, On the second page (or equivalently, second section) I want to achieve a very simple layout where I have a header fixed on top of the page displaying an image which should be responsive, or decreases in size as the window shrinks but stays at the top. </p>

<p><p> Currently, I'm wrapping the image to be displayed in a <code>div</code>. I then scale the <code>div</code> fullscreen using, <br></p>

<pre><code>.post-header {
  background: #22BDA0;
  max-width: 100%;
  height: auto;
}
</code></pre>

<p>The <code>img</code> tag inside of the <code>div</code> has a class <code>header-image</code> which I style as, </p>

<pre><code>.post-header .header-image {
    max-width: 100%;
    height: auto;
    margin: 0;
}
</code></pre>

<p>However, I'm not getting the desired result. There is a small space on top of the second page which I can't get rid of. You can see the website I'm making along with the source code <a href="https://javeria2.github.io/" rel="nofollow">HERE.</a> Just scroll down to second page, or click <code>Personal Details</code> on the homepage. </p>

<p>Thanks a lot for the help! </p>