Почему мой HTML отображается по-разному в Firefox и Chrome?

Question

Я начал практиковаться с HTML и CSS в последнее время, и до сих пор я тестировал свой код с Firefox , и я решил проверить, выглядит ли мой HTML одинаково в Chrome , и это неи я не могу понять, почему.

* {
  box-sizing: border-box;
  font-family: "Open Sans";
}
body {
  margin: 0;
}

.MainContainer {
  position: relative;
  perspective: 1px;
  height: 100vh;
  transform-style: preserve-3d;
  overflow-x: hidden;
  overflow-y: scroll;
}

#MenuContainer {
  height: 89px;
}

#menu {
  background-color: #383e4c;
  text-align: center;
  position: fixed;
  width: 100%;
  height: 89px;
  margin-top: 0;
}
#menu > button {
  color: white;
  font-size: 20px;
  margin: 15px 10px;
  padding: 15px 25px;
  background-color: #383e4c;
  border: 1px solid #646d7c;
  transition: 0.35s;
}
#menu > button:hover {
  background-color: #49505f;
  cursor: pointer;
}
#ImageContainer {
  height: 550px;
  z-index: -1;
  transform: translateZ(-1px) scale(2.1);
}
#ImageContainer > img {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 101%;
  filter: blur(4px);
}
#HeadersContainer {
  position: absolute;
  width: 100%;
  height: 550px;
  top: 89px;
  background-color: rgba(188, 143, 143, 0.3);
}
#headers {
  top: 225px;
  right: 0;
  left: 0;
  bottom: 0;
  position: absolute;
  text-align: center;
}
#MainTitle {
  font-size: 70px;
  color: white;
  margin: 0px;
  text-shadow: 2px 2px black;
  display: block;
}
#SecondaryTitle {
  font-size: 25px;
  color: white;
  margin: 0px;
  text-shadow: 1px 1px black;
  display: block;
}
#filler {
  background-color: black;
  height: 2000px;
}

<link
  href="https://fonts.googleapis.com/css?family=Open+Sans"
  rel="stylesheet"
/>
<div class="MainContainer">
  <div id="menu">
    <button>Homepage</button>
    <button>About Us</button>
    <button>Services</button>
    <button>Contact</button>
    <button>External</button>
  </div>
  <div id="MenuContainer"></div>
  <div id="ImageContainer">
    <img src="Forest.jpg" />
  </div>
  <div id="HeadersContainer">
    <span id="headers">
      <span id="MainTitle">CONQUER</span>
      <span id="SecondaryTitle">Simple Bootstrap Template</span>
    </span>
  </div>
  <div id="filler"></div>
</div>

Кажется, что есть некоторая проблема переполнения с Контейнером Изображения, но я действительно не могу указать на это пальцем.