How To Put Buttons Under The Center Of The Website Text?

Question

I've been having trouble with knowing how to put items under the center of the previous items. It's sort of like this:

I'm not sure on whether or not the method that I'm using is accurate or efficient but if there are any solutions that I could understand as a beginner would be nice. Here's the code for the website:

CODE:

* {
  margin: 0;
  padding: 0;
}

body {
  background-image: linear-gradient(to top, rgba(49, 28, 240, 0.9), rgba(62, 131, 235, 0.9));
  background-attachment: fixed;
  background-repeat: no-repeat;
}


/* Heading */

.container1 {
  /* Contains All Contianers */
  display: flex;
  justify-content: center;
  text-align: center;
}

#header {
  font-family: Impact;
  border: 2px solid black;
  background-color: rgba(169, 169, 169, 0.418);
  padding: 25px;
  flex: 1;
}

#heading_Text {
  font-size: 50px;
  color: rgb(230, 230, 230);
}


/* Navigation */

#nav {
  display: flex;
  justify-content: center;
  text-align: center;
}

#nav a {
  padding: 15px;
  font-family: Impact;
  flex: 1;
  border: 2px solid black;
  font-size: 25px;
  text-decoration: none;
  color: white;
  background-color: rgba(169, 169, 169, 0.397);
}

#nav a:hover {
  padding: 15px;
  font-family: Impact;
  flex: 1;
  border: 2px solid black;
  font-size: 25px;
  text-decoration: none;
  color: white;
  background-color: rgba(169, 169, 169, 0.562);
}

#nav .active {
  padding: 15px;
  font-family: Impact;
  flex: 1;
  border: 2px solid black;
  font-size: 25px;
  text-decoration: none;
  color: rgb(36, 35, 35);
  background-color: rgba(240, 240, 240, 0.877);
}

#main {
  display: flex;
  height: 85vh;
  align-items: center;
  justify-content: center;
}

#main_Text {
  color: rgb(206, 206, 206);
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-size: 75px;
}

.container4 {
  display: flex;
  justify-content: center;
}

<div class="container1">
  <div id="header">
    <h2 id="heading_Text">Sample Website</h2>
  </div>
</div>
<div class="container2">
  <div id="nav">
    <a href="index.html" id="home" class="active">Home</a>
    <a href="#" id="about">About</a>
    <a href="#" id="info">Information</a>
    <a href="#" id="gallery">Gallery</a>
  </div>
</div>
<div class="container3">
  <div id="main">
    <h3 id="main_Text" style="text-align: center;">Welcome To My Sample Website!<br/>The Place Where I Show Off My Projects!</h3>
  </div>
</div>
<div class="container4">
  <input type="button" value="Example Button" id="button1">
  <input type="button" value="Example Button 2" id="button2">
</div>

Answer 1

The answer above by @Sean Reilly is a good option. However, If you don't want to move your buttons inside <div id="main"></div> then you got to reduce the height of the #main div and setup the margin-top according to your requirement. Try to add the below code in your css file,

#main {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 40px;
    height:auto;
}

Answer 2

I just removed height: 85vh; from #main. This is working as you wanted. You could add margin-top to container3 or #main

* {
  margin: 0;
  padding: 0;
}

body {
  background-image: linear-gradient(to top, rgba(49, 28, 240, 0.9), rgba(62, 131, 235, 0.9));
  background-attachment: fixed;
  background-repeat: no-repeat;
}


/* Heading */

.container1 {
  /* Contains All Contianers */
  display: flex;
  justify-content: center;
  text-align: center;
}

#header {
  font-family: Impact;
  border: 2px solid black;
  background-color: rgba(169, 169, 169, 0.418);
  padding: 25px;
  flex: 1;
}

#heading_Text {
  font-size: 50px;
  color: rgb(230, 230, 230);
}


/* Navigation */

#nav {
  display: flex;
  justify-content: center;
  text-align: center;
}

#nav a {
  padding: 15px;
  font-family: Impact;
  flex: 1;
  border: 2px solid black;
  font-size: 25px;
  text-decoration: none;
  color: white;
  background-color: rgba(169, 169, 169, 0.397);
}

#nav a:hover {
  padding: 15px;
  font-family: Impact;
  flex: 1;
  border: 2px solid black;
  font-size: 25px;
  text-decoration: none;
  color: white;
  background-color: rgba(169, 169, 169, 0.562);
}

#nav .active {
  padding: 15px;
  font-family: Impact;
  flex: 1;
  border: 2px solid black;
  font-size: 25px;
  text-decoration: none;
  color: rgb(36, 35, 35);
  background-color: rgba(240, 240, 240, 0.877);
}

#main {
  display: flex;
  align-items: center;
  justify-content: center;
}

#main_Text {
  color: rgb(206, 206, 206);
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-size: 75px;
}

.container4 {
  display: flex;
  justify-content: center;
}

<div class="container1">
  <div id="header">
    <h2 id="heading_Text">Sample Website</h2>
  </div>
</div>
<div class="container2">
  <div id="nav">
    <a href="index.html" id="home" class="active">Home</a>
    <a href="#" id="about">About</a>
    <a href="#" id="info">Information</a>
    <a href="#" id="gallery">Gallery</a>
  </div>
</div>
<div class="container3">
  <div id="main">
    <h3 id="main_Text" style="text-align: center;">Welcome To My Sample Website!<br/>The Place Where I Show Off My Projects!</h3>
  </div>
</div>
<div class="container4">
  <input type="button" value="Example Button" id="button1">
  <input type="button" value="Example Button 2" id="button2">
</div>

Answer 3

If you change your #main css to the code below and then move your button into the #main then it should be where you want it. Then just add margin-top to the button to get it the right distance away.

#main {
  display: flex;
  height: 85vh;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

The buttons are way down the bottom because your #main has a height of 85vh. By bringing the buttons into the same container we don't have to worry about the height pushing them down.

If you want to bring both buttons side by side right below the text then make sure they are in their own div as well so the flex-direction doesn't affect their placement. Like this:

<div>
    <input type="button" value="Example Button" id="button1">
    <input type="button" value="Example Button 2" id="button2">
</div>