div element takes extra vertical space - html

Question

I am trying to implement a contact us page. the heading here takes only the intended space but the div takes up extra vertical space. Where did I go wrong?
section {
display: flex;
flex-wrap: wrap;
width: 99vw;
height: 96vh;
padding-top: 4vh;
}
#heading {
width: 100%;
line-height: 0.7em;
}
h1 {
display: inline;
height: 100%;
font-size: 1rem;
}
<section>
<div id="heading">
<h1>Contact Us</h1>
</div>
<div id="media_container">
<img class="soc_med" src="fb.png" alt="fb">
<img class="soc_med" src="instagram.png" alt="insta">
<img class="soc_med" src="linkedin.png" alt="LinkedIn">
<img class="soc_med" src="email.png" alt="email">
</div>
</section>

Answer 1

Just remove the height from the section
section{
display: flex;
flex-wrap: wrap;
width: 99vw;
padding-top: 4vh;
}
#heading{
width: 100%;
line-height: 0.7em;
}
h1{
display: inline;
height: 100%;
font-size: 1rem;
}
<section>
<div id = "heading">
<h1>Contact Us</h1>
</div>
<div id = "media_container">
<img class="soc_med" src="fb.png" alt="fb">
<img class="soc_med" src="instagram.png" alt="insta">
<img class="soc_med" src="linkedin.png" alt="LinkedIn">
<img class="soc_med" src="email.png" alt="email">
</div>
</section>

Answer 2

Just add margin: 0; to html, body to avoid the default margins on these elements which are the cause for your problem:
html,
body {
margin: 0;
}
section {
display: flex;
flex-wrap: wrap;
width: 99vw;
height: 96vh;
padding-top: 4vh;
}
#heading {
width: 100%;
line-height: 0.7em;
}
h1 {
display: inline;
height: 100%;
font-size: 1rem;
}
<section>
<div id="heading">
<h1>Contact Us</h1>
</div>
<div id="media_container">
<img class="soc_med" src="fb.png" alt="fb">
<img class="soc_med" src="instagram.png" alt="insta">
<img class="soc_med" src="linkedin.png" alt="LinkedIn">
<img class="soc_med" src="email.png" alt="email">
</div>
</section>