There's a blank line between the header element and the main element.
Where does this blank line come from?
I still can't find out why even though I've already inspected the chrome development tool.
I wanna know the reason why this happens, and a solution to solve this.
I'v found my own solution to solve this, and it was to add a padding which is commented out below. But I don't know how this solution solves this problem? Why does that work out?
<body>
<!-- We want to have a navigation bar. -->
<header class="main-header">
<div>
<a href="index.html">
uHost
</a>
</div>
<nav>
<ul>
<li>
<a href="packages/index.html">Packages</a>
</li>
<li>
<a href="customers/index.html">Customers</a>
</li>
<li>
<a href="start-hosting/index.html">Start Hosting</a>
</li>
</ul>
</nav>
</header>
<main>
<section id="product-overview">
<h1>Get the freedom you deserve.</h1>
</section>
<section id="plans">
<h1 class="section-title">Choose Your Plan</h1>
<p>Make sure you get the most for your money!</p>
</section>
</main>
</body>
* {
box-sizing: border-box;
}
body {
font-family: 'Montserrat', sans-serif;
margin: 0;
}
#product-overview {
background: #ff1b68;
width: 100%;
height: 528px;
padding: 10px;
}
.section-title {
color: #2ddf5c;
}
#product-overview h1 {
color: white;
font-family: 'Anton', sans-serif;
}
/* h1 {
font-family: sans-serif;
} */
.main-header {
width: 100%;
background: #2ddf5c;
/* padding: 8px; */
}