html - CSS样式在不同大小的窗口中不对称

Question

所以我制作了一个如下所示的简单页面:

它看起来不错，但如果我将它更改为较小的窗口或更改缩放百分比，它就会变成这样:

如您所见，它是不正确的，因为按钮偏离了，但是 <p>和 <h>标签似乎是对齐的，但不是按钮。

这是我的相关代码部分:

function Pitch() {
  return (
    <div className="section">
      <div className="descriptionpitch">
        <h1>See what's next.</h1>
        <p>WATCH ANYWHERE. CANCEL ANYTIME.</p>
      </div>
      <div className="joinbutton">
        <button>JOIN FREE FOR A MONTH</button>
      </div>
    </div>
  );
}

CSS:

.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;
    }
  }
}

有什么办法可以解决这个问题吗？

Answer 1

尝试此代码..将其添加到同一个 div.. 如果您想在按钮顶部留出更多空间。为此按钮添加 margin-top

function Pitch() {
  return (
    <div className="section">
      <div className="descriptionpitch">
        <h1>See what's next.</h1>
        <p>WATCH ANYWHERE. CANCEL ANYTIME.</p>
        <button>JOIN FREE FOR A MONTH</button>
      </div>      
    </div>
  );
}

并修改此 css 代码..

CSS

  @media (max-width: 800px) {
    .section {
        text-align: left;
    }
  }