Кто-нибудь знает, как сделать макет 50/50 меньше с параллаксом на заднем плане?

Question

Хорошо, я пытаюсь сделать макет 50/50 меньше, как я уже упоминал в своем заголовке. Тем не менее, он не делает то, что я хочу. Я попытался уменьшить ширину, но потом это просто привело к созданию огромного пространства посередине. Я хочу, чтобы 50/50 находились посередине страницы с равной шириной с обеих сторон и с типом параллакса на заднем плане.

HTML:

  <div class="centered">
    <h2 style="color:black;">vist </h2>
    <button class="whitebutton"> Learn More </button>
  </div>
</div>

<!-- Right Content -->
<div class="split right">
  <div class="centered">
    <h2 style="color: black;">Internet?</h2>
    <button class="blackbutton"> Learn More </button>
  </div>
</div> 

CSS:

  position: fixed;
  height: 80%;
  z-index: -3;
  top: 50;
  margin-top: 10px;
  overflow-x: hidden;
  padding-top: 20px;
}
/* left side of 50/50 */
.left {
  left: 50px;
  background-color: gray;
  width: 50%;
}

.right {
  right: 50px;
  background-color: burlywood;
  width: 50%;

}
/* Words and Buttons */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.centered img {
  width: 150px;
  border-radius: 10%;
}
 /* Buttons */
 .blackbutton{
   background-color: black;
   color: white;
   border-color: black;
   border-radius: 20%
 }

 .whitebutton{
   background-color: blanchedalmond;
   border-color: blanchedalmond;
   border-radius: 20%;
 }

Вот фотография того, как это выглядит прямо сейчас

ПРИМЕЧАНИЕ. Если возможно, я хотел бы знать, как сделать так, чтобы теги div имели соответствующую форму следующим образом

Спасибо!