How do I get this footer to line up with the textarea? Flexbox doesn't seem to do it

I want the text at the bottom to be centered and line up with the text boxes. If I add a margin it will only work for my current screen size but when I drag the page to another sized monitor the spacing gets messed up. How do I center the bottom part of this page with the textarea? Here is my code:

* {
  box-sizing: border-box;
}

body {
    margin: 0;
    height: 100%;
}
#flex-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: 'Heebo', sans-serif;


}


.contact-section {
    text-align: center;
    width: 100%;
    height: 77vh;
    background: linear-gradient( rgba(0,0,0,0.35), rgba(0,0,0,0.35)), url(img/colo.png);
    /* background-size: center; */
    background-position: center;
    color: white;
    margin-top: 2.5rem;
    padding: 4rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.contact-section__text {
    font-weight: 700;
    font-size: x-large;
}

label {
    display: none;
} 

.contact input,
.contact textarea {
    margin: .5rem;
    font-weight: 1000;

} 
.contact textarea {
    margin-right: 1.25rem;
}
.contact-section__btn {
    padding: 12px 26px;
    border-radius: 7px;
    background: rgb(201, 83, 5);
    border: none;
    color: white;
    font-size: 1.05rem;
}
.contact-section__btn:hover,
.contact-section__btn:focus {
    background-color: white;
    color: rgb(201, 83, 5);
    cursor: pointer;

}

input[type="text"], [type="email"], textarea {
    background-color: rgb(247, 204, 175);
    border-color: rgb(201, 83, 5);
    width: 400px;
    height: 35px;
    margin-right: 1.45rem;
}

.contact__txtarea label,
.textarea {
    width: 400px;
    height: 200px;
    vertical-align: top;
}
.email-form {
    margin-right: .80rem;
}
.addresses {
    /* background-color: rgb(99, 99, 99); */
    background-color:rgb(201, 83, 5);
    color: white;
    /* margin-top: 2rem; */
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    text-align: center;
    /* padding-inline-start: 0; */
    justify-content: space-evenly;
}

.addresses__info1 {
    flex-direction: column;

}
.addresses__info2 {
    flex-direction: column;
}
.main_footer {

  /* background-color:rgb(99, 99, 99); */
  background-color:rgb(201, 83, 5);
    margin-top: 3.5rem;
    flex-direction: column;
}

.footer_links  { /*li*/
  margin: 0;
}

.footer_lists  { /*ul*/
  list-style: none;
  margin: 0;
    text-align: center;
    padding-inline-start: 0;
}

.footer_links a { /*li a*/
  color:white;
  text-decoration: none;
  font-size: 1.1rem;

}
.footer_links :hover {
  text-decoration-line: underline;
}

 <!DOCTYPE html>

<html>
  <head>
      <title>Contact | Feel free to email or call Us!</title>
      <link rel="stylesheet" type="text/css" href="contact.css">
      <link rel="stylesheet" type="text/css" href="contact_nav_ft.css">
      <link href="img/colo.icon .png" rel="shortcut icon" type="image/x-icon" />
      <link href="https://fonts.googleapis.com/css2?family=Heebo&display=swap" rel="stylesheet">


  </head>

  <body>
    <nav>
        <ul class="nav_list">
            <li ></li>
            <li class="nav_lists" style="float:right;"><a href="Colombia.html">Our Purpose</a></li>
            <li class="nav_lists"><a href="Colombian-cities.html">Cities</a></li>
            <li class="nav_lists"><a href="contact.html">Contact</a></li>
            <li class="nav_lists"><a href="services.html">Our Services</a></li>
        </ul>
    </nav>

  <main id="flex-container">
    <section class="contact-section">
      <div class="contact-section__text">
        <p>
            Shoot us an email or Give us a call!<br>
            We are always happy to answer any questions you may have!<br>
        </p>
      </div>
        <form action="" method="POST" class="contact">
            <div>
                <label for="name">Your Name</label>
                <input id="name" type="text"  placeholder="Your name" required>
            </div>
            <div class="email-form">
                <label for="email">Your Email</label>
                <input id="email" type="email" placeholder="Your email" required>
            </div>
            <div class="contact__txtarea">
                <label for="text">Message</label>  
                <textarea  class="textarea" id="text" maxlength="500" placeholder="Your message here..." required></textarea>
            </div>
            <div>
                <input class="contact-section__btn" type="submit" value="Send Message" required> 
            </div>
        </form>
    </section>


    <section class="addresses">
        <div class="addresses__info1">
            <p>Finds us on:</p>
            <img src="img/you.svg" alt="Youtube">
            <img src="img/insta.svg" alt="Instagram">
            <img src="img/face.svg" alt="Facebook">

            <p>Email us at: <a href="mailto:[email protected]">[email protected]</a><br>
            Call us at: <a href="tel:+57 118-647-0023">+57 118-647-0023</a><br></p>
        </div>


        <div class="addresses__info2">
            <p>Calle Maria 63 Oficina 702<br>
            Medellin 4665684<br>
            Colombia<br></p>

            <p>Tuesday-Saturday<br>
            9AM - 6PM COT<br></p>

        </div>

        <footer class="main_footer">
        <ul class="footer_lists">
            <li class="footer_links"><a href="terms.html">Terms</a></li>
            <li class="footer_links"><a href="privacy.html">Privacy Policy</a></li>
        </ul>
        </footer> 

    </section>

<!--</section>-->
  </main>
</body>
</html>

Solution

Try this:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  height: 100%;
}

#flex-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: 'Heebo', sans-serif;
}

.contact-section {
  text-align: center;
  width: 100%;
  height: 77vh;
  background: linear-gradient( rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)), url(img/colo.png);
  /* background-size: center; */
  background-position: center;
  color: white;
  margin-top: 2.5rem;
  padding: 4rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.contact-section__text {
  font-weight: 700;
  font-size: x-large;
}

label {
  display: none;
}

.contact input,
.contact textarea {
  margin: .5rem;
  font-weight: 1000;
}

.contact textarea {
  margin-right: 1.25rem;
}

.contact-section__btn {
  padding: 12px 26px;
  border-radius: 7px;
  background: rgb(201, 83, 5);
  border: none;
  color: white;
  font-size: 1.05rem;
}

.contact-section__btn:hover,
.contact-section__btn:focus {
  background-color: white;
  color: rgb(201, 83, 5);
  cursor: pointer;
}

input[type="text"],
[type="email"],
textarea {
  background-color: rgb(247, 204, 175);
  border-color: rgb(201, 83, 5);
  width: 400px;
  height: 35px;
  margin-right: 1.45rem;
}

.contact__txtarea label,
.textarea {
  width: 400px;
  height: 200px;
  vertical-align: top;
}

.email-form {
  margin-right: .80rem;
}

.addresses {
  /* background-color: rgb(99, 99, 99); */
  background-color: rgb(201, 83, 5);
  color: white;
  /* margin-top: 2rem; */
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  text-align: center;
  /* padding-inline-start: 0; */
}

.addresses__info1 {
  flex-direction: column;
  width: 1rem;
  flex-grow: 1;
}

.addresses__info2 {
  flex-direction: column;
  width: 1rem;
  flex-grow: 1;
}

.main_footer {
  /* background-color:rgb(99, 99, 99); */
  background-color: rgb(201, 83, 5);
  margin-top: 3.5rem;
  flex-direction: column;
  width: 1rem;
  flex-grow: 1;
}

.footer_links {
  /*li*/
  margin: 0;
}

.footer_lists {
  /*ul*/
  list-style: none;
  margin: 0;
  text-align: center;
  padding-inline-start: 0;
}

.footer_links a {
  /*li a*/
  color: white;
  text-decoration: none;
  font-size: 1.1rem;
}

.footer_links :hover {
  text-decoration-line: underline;
}

<!DOCTYPE html>

<html>

<head>
  <title>Contact | Feel free to email or call Us!</title>
  <link rel="stylesheet" type="text/css" href="contact.css">
  <link rel="stylesheet" type="text/css" href="contact_nav_ft.css">
  <link href="img/colo.icon .png" rel="shortcut icon" type="image/x-icon" />
  <link href="https://fonts.googleapis.com/css2?family=Heebo&display=swap" rel="stylesheet">


</head>

<body>
  <nav>
    <ul class="nav_list">
      <li></li>
      <li class="nav_lists" style="float:right;"><a href="Colombia.html">Our Purpose</a></li>
      <li class="nav_lists"><a href="Colombian-cities.html">Cities</a></li>
      <li class="nav_lists"><a href="contact.html">Contact</a></li>
      <li class="nav_lists"><a href="services.html">Our Services</a></li>
    </ul>
  </nav>

  <main id="flex-container">
    <section class="contact-section">
      <div class="contact-section__text">
        <p>
          Shoot us an email or Give us a call!<br> We are always happy to answer any questions you may have!<br>
        </p>
      </div>
      <form action="" method="POST" class="contact">
        <div>
          <label for="name">Your Name</label>
          <input id="name" type="text" placeholder="Your name" required>
        </div>
        <div class="email-form">
          <label for="email">Your Email</label>
          <input id="email" type="email" placeholder="Your email" required>
        </div>
        <div class="contact__txtarea">
          <label for="text">Message</label>
          <textarea class="textarea" id="text" maxlength="500" placeholder="Your message here..." required></textarea>
        </div>
        <div>
          <input class="contact-section__btn" type="submit" value="Send Message" required>
        </div>
      </form>
    </section>


    <section class="addresses">
      <div class="addresses__info1">
        <p>Finds us on:</p>
        <img src="img/you.svg" alt="Youtube">
        <img src="img/insta.svg" alt="Instagram">
        <img src="img/face.svg" alt="Facebook">

        <p>Email us at: <a href="mailto:[email protected]">[email protected]</a><br> Call us at: <a href="tel:+57 118-647-0023">+57 118-647-0023</a><br></p>
      </div>


      <div class="addresses__info2">
        <p>Calle Maria 63 Oficina 702<br> Medellin 4665684<br> Colombia
          <br></p>

        <p>Tuesday-Saturday<br> 9AM - 6PM COT<br></p>

      </div>

      <footer class="main_footer">
        <ul class="footer_lists">
          <li class="footer_links"><a href="terms.html">Terms</a></li>
          <li class="footer_links"><a href="privacy.html">Privacy Policy</a></li>
        </ul>
      </footer>

    </section>

    <!--</section>-->
  </main>
</body>

</html>