英雄响应文本框的问题

Question

我有一个关于我正在使用与英雄重叠的文本框的响应性问题的问题。文本框与英雄的左侧对齐，并且在调整大小时我想保持它具有相同的边距，但是它只是在调整大小时消失。

我附上了当前进展的图像，如果有人能帮我解决这个问题，我会很高兴！当它达到平板电脑尺寸（可能是768px）时，如果能够对齐中心也会很棒。

我很抱歉您无法在代码段中看到英雄形象，但我附上了一张应该是什么样子的图片：

[]

.hero-image {
  background-image: url("../images/banner-top.png");
  height: 50%;
  width: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 10%;
  transform: translate(-50%, -50%);
  color: black;
  border: 8px solid orange;
  background-color: #dcdcdc;
  padding: 30px;
}

@media only screen and (max-width: 900px) {
  .info-box-wrappper {
    width: 100%;
    margin: 0 auto;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

<div class="hero-image" src="../images/banner-top.png">
  <div class="info-box-wrappper">
    <div class="hero-text">
      <h2>For more information...</h2>
      <h1>Contact us!</h1>
    </div>
  </div>
</div>