CSS Styling non symétrique dans une fenêtre de taille différente

J'ai donc fait une page simple qui ressemble à celle ci-dessous:

p>

Il a l'air bien, mais si je le change en une fenêtre plus petite ou changeant Le zoom%, c'est à quoi il ressemble: p>

p>

Comme vous pouvez le constater, ce n'est pas juste car le bouton est bien Off mais le

code> et code> la balise semble être aligner mais pas le bouton. p>

Voici ma partie pertinente du code: P>

.section {
  color: white;
  margin: 0 3%;
  position: absolute;
  top: 35%;
  font-size: 1.8vw;
  //text-align: center;

  @media (max-width: 1000px) {
    top: 55%;
    font-size: 1.9vw;
  }
  @media (max-width: 800px) {
    top: 60%;
    font-size: 3.2vw;
    margin: 0 4em;
    text-align: center;
  }

  h1 {
    font-size: 3em;
    margin: 0 0 0.2em;
    font-weight: 700;
  }
  p {
    margin: 0 3.5em 0 0;
    font-weight: 700;
  }
  button {
    font-size: 14px;
    letter-spacing: 1.9px;
    font-weight: 100;
    margin: 1.2em 24.5em 0 0;
    padding: 12px 2em;
    color: white;
    background-color: #e50914;
    cursor: pointer;
    text-decoration: none;
    //vertical-align: middle;
    font-family: Arial, sans-serif;
    border-radius: 2px;
    user-select: none;
    // text-align: center;
    border: 0;
    &:hover {
      background-color: #e53935;
    }
  }
}