如何阻止<footer>与<sector>重叠以及如何消除此空白？

Question

我刚刚开始学习Web开发，遇到了一些问题。 这是我的网站的屏幕截图：

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  padding: 0;
  margin: 0;
  background-color: lightgray;
}

.submit-button {
  height: 38px;
  background: orange;
  border: 0;
  padding: 0 20px 0 20px;
  color: white;
}

footer p {
  font-family: 'Algerian';
  font-size: 20px;
}

.container {
  width: 80%;
  margin: auto;
}

ul {
  padding: 0;
  margin: 0;
}

header {
  background: rgb(0, 0, 0);
  color: rgb(250, 250, 250);
  padding-top: 30px;
  min-height: 70px;
  border-bottom-style: solid;
  border-bottom-color: orange;
  border-bottom-width: 3px;
  max-height: none;
}

header a {
  color: white;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 16px;
}

header ul {
  margin: 0;
  padding: 0;
}

header li {
  /* float: left; */
  display: inline;
  padding: 0 20px 0 20px;
}

header .brand-name {
  float: left;
}

header .brand-name h1 {
  margin: 0;
}

header nav {
  float: right;
  margin-top: 10px;
  font-weight: bold;
}

header #current a {
  color: red;
  font-weight: bold;
}

header a:hover {
  color: darkgray;
  font-size: 16px;
}

.showcase {
  background: red;
  min-height: 400px;
  text-align: center;
  color: white;
}

.showcase h1 {
  margin-top: 100px;
  font-size: 55px;
  margin-bottom: 10px;
}

.showcase p {
  font-size: 20px;
}

.newsletter {
  padding: 15px;
  color: white;
  background-color: dimgray;
  min-height: 75px;
}

.newsletter h1 {
  float: left;
  padding-bottom: 30px;
  margin-bottom: 10px;
}

.newsletter form {
  float: right;
  margin-top: 12px;
}

.newsletter input[type="email"] {
  padding: 4px;
  height: 25px;
  width: 250px;
}

.boxes {
  margin-top: 20px;
}

.boxes .box {
  float: left;
  width: 30%;
  padding: 10px;
  text-align: center;
}

.boxes .box img {
  width: 90px;
}

footer {
  display: block;
  padding: 20px;
  margin-top: 20px;
  color: white;
  background-color: black;
  text-align: center;
}

<header>
  <div class="container">
    <div class="brand-name">
      <h1>John</h1>
    </div>
    <nav>
      <ul>
        <li id="current"><a href="mywebsite.html">Home</a></li>
        <li><a href="https://www.google.com">My Services</a></li>
        <li><a href="https://www.youtube.com">Contact Us</a></li>
      </ul>
    </nav>
  </div>
</header>

<main class="main">
  <section class="showcase">
    <div class="container">
      <h1>Affordable Professional Websites</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer finibus, nunc vitae posuere rutrum, diam tellus tristique felis, id </p>
    </div>
  </section>

  <section class="newsletter">
    <div class="container">
      <h1>Subscribe To Our Newsletter</h1>
      <form action="#">
        <input type="email" placeholder="Enter Your Email ID...">
        <button class="submit-button" type="submit">
                        Subscribe
                    </button>
      </form>
    </div>
  </section>

  <section class="boxes">
    <div class="container">
      <div class="box b1">
        <img src="https://www.shareicon.net/download/2016/08/01/639868_development.ico">
        <h3>HTML 5 Markup</h3>
        <p>lectus orci nec dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>

      <div class="box b2">
        <img src="http://chittagongit.com/download/227992" width="256">
        <h3>CSS3 Styling</h3>
        <p>lectus orci nec dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>

      <div class="box b3">
        <img src="https://i.pinimg.com/originals/fc/20/b2/fc20b281eab7d88bc7e0fd2411533837.jpg" width="256">
        <h3>Web Design</h3>
        <p>lectus orci nec dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>

    </div>
  </section>
</main>



<div class="footer">
  <footer>
    <p>BR Parikshith Prasad, Copyright &copy; 2019</p>
  </footer>
</div>

我要消除标题和区域之间（顶部导航栏和“负担得起的网站”区域之间的间隙）。

页脚也与该部分重叠。

请检查我的代码并提供解决方案。