I'm trying to figure out why the margin of the navbar (specifically: margin-bottom 50px) is overlapping with the margin of the main content (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 offering early access for users. <a href="#">Learn more.</a></span>
<h1>Build a highly engaged community effortlessly.</h1>
<p>Our platform provides the necessary tools for building an active community without much hassle. Just set up your workspace on our platform and manage everything from members to content through a single 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;
}
Provided below are some images for your reference!
- Navigation bar margin: https://i.sstatic.net/pKtsc.png
- Main content margin: https://i.sstatic.net/iURsF.png
Thanks for your time and assistance! :)