After creating my website, I noticed that the marquee I added has an unexpected bottom margin even though I didn't specify one. I confirmed it was the marquee causing the issue by placing other tags below it, and the bottom margin persisted.
<marquee style="background-color:#bababa;width:100%;font-size:18px;font-family:'Raleway',sans-serif;font-weight:600;height:30px;" onmouseover="this.stop();" onmouseout="this.start()">Amid coronavirus concerns, Nebraska's homeschool filings jump up 21%</marquee>
<div id="home" style="text-align:center;">
<div class="iframe-container">
<iframe width="100%" src="https://www.youtube.com/embed/CwJkjB7lAI4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
css-
.iframe-container {
position: relative;
width: 100%;
padding-bottom: 56.25%;
height: 0;
}
.iframe-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}