I'm wondering why the navbar margin (specifically: margin-bottom 50px) overlaps with the main-content margin (specifically: margin-top 50px).
HTML
<nav class="navbar">
<img src="../Assets/Logo.svg" alt="Logo" class="navbar-logo">
<ul class="navbar-link">
<li><a href="#" class="navbar-link-item">Features</a></li>
<li><a href="#" class="navbar-link-item">Affliates</a></li>
<li><a href="#" class="navbar-link-item">Pricing</a></li>
<li><a href="#" class="navbar-link-item">Communities</a></li>
<li><a href="#" class="navbar-link-item join-button">Join Waitlist</a></li>
</ul>
</nav>
<main class="main-content">
<section class="text-section">
<span>We are now allowing early-access for users. <a href="#">Learn more.</a></span>
<h1>Build a highly engaged community with no effort.</h1>
<p>Commune offers the tools you need to build a highly engaged community with little to no effort. Simply
setup
your Commune workspace, and manage everything from members to content from one central dashboard.</p>
<div>
<input type="email" placeholder="Enter your e-mail address">
<a href="#">Join Waitlist</a>
</div>
</section>
<section class="illustration">
<img src="../Assets/Illustration.png" alt="Illustration" class="illustration-img">
</section>
</main>
CSS
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
margin: 50px 0;
}
.navbar-link li, .navbar-link {
display: inline;
.main-content {
display: flex;
margin: 50px 0;
}
Have attached some pictures for easy reference!
- Navigation bar margin: https://i.stack.imgur.com/pKtsc.png
- Main content margin: https://i.stack.imgur.com/iURsF.png
Thank you for reading, and appreciate the help! :)
