My website

Need to fix the big gap on the bottom.

HTML

<!DOCTYPE html>

<body>

<h1><b>PLEXCOO</b> DESIGNS</h1>

<ul>
    <li><a href="#about">About</a></li>
    <li><a href="#purchase">Purchase</a></li>
    <li><a href="#support">Support</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#portfolio">Portfolio</a></li>
</ul>

<img id="backgroundimage" src="https://i.gyazo.com/43da9b87aedb16d4ad8fb12c54f289e0.png" alt="backgroundimage" height="550">

<p id="welcome">Welcome to...</p>
<p id="servicetitle">Plexcoo's Designs</p>
<p id="subtitle">Affordable | Unique | High Quality | Beautiful</p>

<button id="orderbutton">Order now</button>

<p id="why"><font size="6"><b>SO, WHY CHOOSE PLEXCOO?</b></font></p>

<p id="uniquedesigns"><font size="5" color="#00ffc0"><b>Unique, sleek, affordable designs</b></font><br>
<font size="3">Are you tired of boring, original, tedious looking HTML designs? Well you can wave goodbye to that, because with the power of HTML and CSS, the possibilities are endless! Our websites are pleasing, unique and eye-catching. Your visitors will be attracted to your website. If you're trying to get a message across to your users, such as a product selling attempt, then your customers are sure to be attached!</font>
</p>
<p id="affordable"><font size="5" color="#ff3333"><b>Affordable prices</b></font><br>
<font size="3">These days, paying for website development is excessively expensive. But here, at Plexcoo designs, we understand the struggle and need for your website. We are here to offer you great looking websites for cheap, affordable prices. Click here to see our price range management! Prices start from as low as <b>$50 bucks</b>! If I take too long to make your website, we also offer refunds as well as access to the progressed source code. There's no risk!</b>
</p>

<p id="portfolio"><font size="5" color="#8533ff"><b>Previous experience</b></font><br>
<font size="3">Don't believe me? Check out my previous work! Click here to see my portfolio. I'm sure you will be pleased with...

CSS

body {
  background-color: white;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-right: 0px;
  margin-left: 0px;
}
ul {
  font-family: "Segoe UI";
  font-weight: Lighter;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: white;
  position: fixed;
  height: 48px;
  width: 100%;
  border-bottom: solid #00ffc0;
}
li {
  color: white;
  float: left;
  margin-left: 1%;
}
li:first-child {
  margin-left: 16%;
}
li a {
  display: block;
  color: #8c8c8c;
  text-align: center;
  padding: 13px 15px;
  text-decoration: none;
}
li a:hover {
  color: #00ffc0;
}
h1 {
  font-size: 18px;
  font-family: "Segoe UI";
  font-weight: normal;
  line-height: 1.2;
  text-align: right;
  left: 30px;
  top: -12px;
  position: fixed;
  background-color: #e5e5e5;
  padding: 13.500px;
  z-index: 3;
}
#backgroundimage {
  width: 100%;
  background-color: black;
  background-repeat: no-repeat;
  background-size: contain;
  background-attachment: fixed;
  z-index: 1;
}
#welcome {
  color: white;
  font-family: "Neou";
  font-weight: bold;
  font-size: 33px;
  position: relative;
  top: -430px;
  text-align: center;
}
#servicetitle {
  color: #00ffc0;
  font-family: "Neou";
  font-weight: bold;
  font-size: 45px;
  position: relative;
  top: -470px;
  text-align: center;
}
#orderbutton {
  font-family: "Neou";
  color: white;
  font-size: 19px;
  border-width: 1px;
  border-color: rgb(255, 255, 255);
  border-style: solid;
  border-radius: 10px;
  background-color: rgba(229, 229, 229, 0);
  position: relative;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  top: -440px;
  width: 200px;
  height: 60px;
  text-align: center;
}
#orderbutton:hover {
  font-family: "Neou";
  color: white;
  font-size: 19px;
  border-width: 1px;
  border-color: rgb(255, 255, 255);
  border-style: solid;
  border-radius: 10px;
  background-color: rgba(0, 255, 192, 0.231);
  position: relative;
  left: 50%;
  margin-right: -50%;
  transform:...