my page's footer jitter on resize

When I resize my browser's window my footer's inputs start to jitter. If I delete styles for the inputs, the form itself starts to jitter. It doesn't jitter if I delete all the styles, of course. I think it happens cause of some mistakes in my flex properties because height is fixed all the time so it can't be the problem(I think so). Explain this to me please C: Here is the code.

And I got I got a codepen copy of this block in which the content doesn't really jitter https://codepen.io/anon/pen/WKvNWG ... But why?

body {
  margin: 0;
  font-family: 'Yantramanav', sans-serif;
  font-size: 16px;
  line-height: 20px;
  overflow-x: hidden;
}

.footer {
  background-color: #f3f3f3;
}

.footer__holder {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: 135px 0 110px;
  text-align: center;
}

.footer__title {
  margin-bottom: 10px;
}

.footer__subtitle {
  font: 400 20px 'Nunito', sans-serif;
  padding: 0 15px;
  margin: 0 0 40px;
}

.footer__form {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin: 0 auto;
}

.footer__email {
  color: #000;
  width: 300px;
  height: 50px;
  margin: 0;
  border: none;
  -webkit-border-radius: 22px 0 0 22px;
  border-radius: 22px 0 0 22px;
  font: 18px 'Yantramanav', sans-serif;
  font-weight: 300;
  padding: 0 0 0 30px;
  outline: none;
}

.footer__email::-webkit-input-placeholder {
  color: #8c8c8c;
}

.footer__email::-moz-placeholder {
  color: #8c8c8c;
}

.footer__email:-ms-input-placeholder {
  color: #8c8c8c;
}

.footer__email::-ms-input-placeholder {
  color: #8c8c8c;
}

.footer__email::placeholder {
  color: #8c8c8c;
}

.footer__button {
  -webkit-border-radius: 0 22px 22px 0;
  border-radius: 0 22px 22px 0;
  border: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  width: 170px;
  font: 600 20px 'Nunito', sans-serif;
  background: #20ab50;
  text-transform: capitalize;
  color: #fff;
  height: 50px;
  cursor: pointer;
  outline: none;
  -webkit-transition: .2s;
  -o-transition: .2s;
  transition: .2s;
}

.footer__button:hover {
  opacity: .9;
}

@media (max-width: 991px) {
  .footer__holder {
    padding: 50px 0;
  }
  .footer__button {
    font-size: 18px;
  }
}

@media (max-width: 600px) {
  .footer__title {
    font-size: 24px;
  }
  .footer__subtitle {
    font-size: 16px;
  }
  .footer__form {
    max-width: 90%;
  }
  .footer__email {
    max-width: 60%;
  }
}
<footer class="footer section">
  <div class="footer__holder">
    <h2 class="footer__title section-title">Be the first to see goplae.co.uk</h2>
    <p class="footer__subtitle">Sign Up for the latest news</p>
    <form class="footer__form">
      <input class="footer__email" type="email" placeholder="Enter email address" required>
      <input class="footer__button" type="submit" value="sign up">
    </form>
  </div>
</footer>