container excluding some of its elements

Question

I have this container #headline containing my #content, button, and #pagination, and for some reason whenever the screen width was being resized for example for phones orientation, for some reason, it's excluding some of my elements inside that container(#headline) and that elements are the button and #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>

I put red borders on my container and its elements containing such as the #content, button, and #pagination.

Answer 1

By "excluding" elements, do you mean the content is overflowing the #headline container and is shown outside of the border?

This is because of height: 100vh, which should be changed to min-height: 100vh

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

#headline {
  width: 50%;
  float: left;
  color: floralwhite;
  min-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>