I want to move the submit button below the email, what should i do. Thank you

html {
  box-sizing: border-box;
}

#header-img {
  height: 40px;
}

#nav-bar {
  float: right;
}

.nav-link {
  text-decoration: none;
  color: black;
  margin: 5px;
}

.nav-link:hover {
  background-color: #99c9ff;
  color: white;
}

h2 {
  text-align: center;
}

#email {
  width: 50vw;
  margin-left: 25vw;
  display: block;
}

#submit {
  margin-left: 25vw;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Product Landing Page</title>
  <link href="styles.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <main>
    <header id="header">
      <div class="logo">
        <img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png " alt="logo" </div>
        <nav id="nav-bar">
          <a class="nav-link" href="#Features">Features</a>
          <a class="nav-link" href="#How it works">How it works</a>
          <a class="nav-link" href="#Pricing">Pricing</a>
        </nav>
    </header>
  </main>
</body>
<h2>Handcrafted, home-made masterpieces</h2>
<form id="form">
  <input id="email" name="email" type="email" placeholder="Enter your email here" required>
  </input>
  <input id="submit" type="submit" value="Get Started"></input>
</form>

<form id="form">
  <div>
    <input id="email" name="email" type="email" placeholder="Enter your email here" required />
  </div>
  <div>
    <input id="submit" type="submit" value="Get Started" />
  </div>
</form>

input {
  display: block;
}

<form id="form">
  <input id="email" name="email" type="email" placeholder="Enter your email here" required />
  <input id="submit" type="submit" value="Get Started" />
</form>