我有一个容器#headline，其中包含我的#content，button和#pagination，并且由于某种原因，每当屏幕宽度被调整大小时，例如为了手机的方向，出于某种原因，它会排除容器中的一些元素（#headline），这些元素是button和#pagination。

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}

#headline {
  width: 50%;
  float: left;
  color: floralwhite;
  height: 100vh;
}

#solarsystem {
  width: 50%;
  float: left;
  height: 100vh;
  position: relative;
}

#headline #content {
  margin: 6rem 5rem;
  border-left: 1rem solid white;
}

#headline #content h1 {
  font-size: 5rem;
  margin-left: 3rem;
  margin-bottom: 1rem;
  text-indent: 5px;
}

#headline #content p {
  text-indent: 10px;
  margin-left: 3rem;
}

button {
  padding: 1rem 1rem;
  font-size: 12px;
  color: white;
  border: 1px solid white;
  display: inline-block;
  margin-left: 8rem;
  background: transparent;
  position: relative;
}

button:before {
  content: "";
  position: absolute;
  width: 0%;
  height: 100%;
  top: 0;
  left: 0;
  background: white;
  transition: width 0.3s;
  z-index: -1;
}

button:hover:before {
  width: 100%;
}

button:hover {
  color: black;
}

#pagination {
  margin-top: 8rem;
  margin-left: 8rem;
  display: inline-block;
}

#pagination a {
  padding: 10px 10px;
  color: white;
  text-decoration: none;
}

#pagination a:hover {
  background: white;
  color: black;
}

#pagination a#active {
  background: white;
  color: black;
}

body {
  width: 100vw;
  height: 100vh;
  background: black;
}

#sun {
  position: absolute;
  z-index: 99;
  top: 50%;
  left: 50%;
  width: 5rem;
  height: 5rem;
  border: 1 solid red;
  background: yellow;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  outline: 1px solid white;
  outline-offset: 1.5rem;
}

#mercury {
  position: absolute;
  z-index: 98;
  top: calc(50% - 0.5rem);
  left: calc(50% - 0.5rem);
  width: 1rem;
  height: 1rem;
  border: 1px solid black;
  background: gray;
  border-radius: 50%;
  animation: orbitmercury 2s linear infinite;
}

#venus {
  position: absolute;
  z-index: 98;
  top: calc(50% - 0.75rem);
  left: calc(50% - 0.75rem);
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid orange;
  background: red;
  border-radius: 50%;
  animation: orbitvenus 3.5s linear infinite;
}

#orbitv {
  position: absolute;
  z-index: 1;
  width: 12rem;
  height: 12rem;
  background: transparent;
  border: 1px solid white;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#earth {
  position: absolute;
  z-index: 98;
  top: calc(50% - 1.25rem);
  left: calc(50% - 1.25rem);
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid white;
  background: linear-gradient(270deg, skyblue, lime);
  border-radius: 50%;
  animation: orbitearth 5s linear infinite;
}

#orbite {
  position: absolute;
  z-index: 1;
  width: 18rem;
  height: 18rem;
  background: transparent;
  border: 1px solid white;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#mars {
  position: absolute;
  z-index: 98;
  top: calc(50% - 1.1rem);
  left: calc(50% - 1.1rem);
  width: 2.2rem;
  height: 2.2rem;
  border: 1px solid orange;
  border-radius: 50%;
  animation: orbitmars 6s linear infinite;
  background: red;
}

#orbitm {
  position: absolute;
  z-index: 1;
  width: 32rem;
  height: 32rem;
  background: transparent;
  border: 1px solid white;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@keyframes orbitmercury {
  from {
    transform: rotate(0deg) translate(4rem) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translate(4rem) rotate(0deg);
  }
}

@keyframes orbitvenus {
  from {
    transform: rotate(0deg) translate(6rem) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translate(6rem) rotate(0deg);
  }
}

@keyframes orbitearth {
  from {
    transform: rotate(0deg) translate(9rem) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translate(9rem) rotate(0deg);
  }
}

@keyframes orbitmars {
  from {
    transform: rotate(0deg) translate(16rem) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translate(16rem) rotate(0deg);
  }
}

@media screen and (max-width: 720px) {
  body {
    overflow-y: scroll;
    overflow-x: hidden;
  }
  #headline {
    width: 100%;
    margin: 5rem 0;
    border: 5px solid red;
  }
  #headline #content {
    margin: 6rem 2rem;
  }
  #headline button {
    margin: 1rem auto;
    border: 1px solid red;
  }
  #headline #pagination {
    margin: 2rem auto;
    border: 1px solid red;
  }
  #headline #pagination a {
    display: inline-block;
  }
  #solarsystem {
    width: 100%;
    overflow: hidden;
    margin-top: 30rem;
  }
}

<div id="headline">
  <div id="content">
    <h1> Sol System</h1>
    <p> The Solar System is the gravitationally bound system of the Sun and the objects that orbit it. The largest of such objects are the eight planets, in order from the Sun: four terrestrial planets named Mercury, Venus, Earth and Mars and 4 more other
      planets.
  </div>
  <button> Learn More </button>
  <br>
  <div id="pagination">
    <a href=""> &laquo; </a>
    <a href="" id="active"> 1 </a>
    <a href=""> 2 </a>
    <a href=""> 3 </a>
    <a href=""> 4 </a>
    <a href=""> 5 </a>
    <a href=""> 6 </a>
    <a href=""> &raquo; </a>
  </div>
</div>

<div id="solarsystem">
  <div id="sun">
  </div>

  <div id="mercury">
  </div>

  <div id="venus">
  </div>
  <div id="orbitv"></div>

  <div id="earth">
  </div>
  <div id="orbite"></div>

  <div id="mars">
  </div>
  <div id="orbitm"></div>
</div>

我在容器及其包含#content、button和#pagination的元素上设置了红色边框。