Почему содержимое выходит за пределы тела, даже если высота установлена ​​на 100%?

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html{
  height: 100%;
}
body {
  margin: 0;
  min-height: 100%;
  padding: 0;
  font-family: Arial, sans-serif;
  color: black;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #333;
  padding: 1rem;
}

h1 {
  font-size: 2.5rem;
  margin: 0;
  color: #fff;
  font-style: italic;
  font-weight: bold;
}

header.menu-icon {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 2rem;
  border-radius: 3px;
  cursor: pointer;
}

.menu-icon div {
  width: 35px;
  height: 5px;
  background-color: white;
  margin: 6px 0;
  cursor: pointer;
}

.center {
  margin: auto;
  width: 50%;
  padding: 10px;
  text-align: center;
}

.ticket-title {
  text-transform: uppercase;
  font-weight: bold;
  font-size: 2rem;
  padding: 10px;
}

.button-container {
  display: flex;
  justify-content: center;
  align-items: center;

}

.button {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  border: none;
  border-radius: 30px;
  padding: 1rem 2rem;
  font-weight: bold;
  font-size: 1.5rem;
  text-transform: uppercase;
  cursor: pointer;
  background-color: rgba(255, 0, 0, 0.5);
}

.ticket-price {
  font-size: 24px;
  font-weight: bold;
}

.ticket-location {
  font-weight: bold;
  font-size: 24px;
}

.ticket-start {
  font-size: 16px;
  margin-bottom: 20px;
  font-weight: lighter;
}

.image-container div {
  padding: 5px;
}

.image-container img {
  display: block;
  width: 70%;
}

footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #333;
  padding: 1rem;
}

.footer-nav {
  margin-top: 10px;
  margin-left: 10%;
  text-align: left;
}

.footer-nav a {
  color: #fff;
  text-decoration: none;
  margin-right: 20px;
}

.footer-nav a:hover {
  text-decoration: underline;
}

li {
  display: inline;
}

.fa {
  padding: 20px;
  text-align: center;
  margin: 5px 2px;
  font-size: 30px;
  width: 50px;
}

.fa-facebook {
  background: #3B5998;
  color: white;
}

.fa-instagram {
  background: #125688;
  color: white;
}

.fa-spotify {
  background: green;
  color: white;
}

.fa-youtube {
  background: #bb0000;
  color: white;
}

<header>
  <div>
    <h1>Elektrik Eel</h1>
  </div>
  <span class = "menu-icon">
    <div></div>
    <div></div>
    <div></div>
  </span>
</header>
<section class = "center">
  <div class = "ticket-title">Tickets</div>
  <div class = "button-container">
    <button class = "button">Book now</button>
  </div>
  <div class = "ticket-price">
    <p>
      Early bird: $205 (3 days)<br>
      Full price: $340 (3 days)<br>
      Single day; $110
    </p>
  </div>
  <div class = "ticket-location-container">
    <div class = "ticket-location">
      <div>Adelaide</div>
      <p class = "ticket-start">
        November 11th<br>
        Victoria Square<br>
        Starts 8pm
      </p>
    </div>
    <div class = "ticket-location">
      <div>Sydney</div>
      <p class = "ticket-start">
        November 15th<br>
        Opera on Sydney Harbour<br>
        Starts 8pm
      </p>
    </div>
    <div class = "ticket-location">
      <div>Melbourne</div>
      <p class = "ticket-start">
        November 20th<br>
        Melbourne Park<br>
        Starts 8pm
      </p>
    </div>
    <div>
      <p>
        Engage your senses and<br>
        become immersed in an<br> 
        electrifying aural universe
      </p>
    </div>
  </div>
  <div class = "image-container">
    <img src = "cat.jpg" style = "float: right; margin: 5%;" >
    <img src = "cat.jpg" style = "margin: 5%;">
    <img src = "cat.jpg" style = "float: right"> 
  </div>
  <!--
  <div class = "button-container">
    <button class = "button">Buy tickets</button>
  </div>
  -->
</section>
<footer>
  <div>
    <nav class = "footer-nav">
      <a href = "#">Artists</a><br>
      <a href = "#">Locations</a><br>
      <a href = "#">Merch</a><br>
      <a href = "#">About</a><br>
      <a href = "#">Contact</a>
    </nav>
  </div>
  <ul>
    <li>   
      <a href = "#" class = "fa fa-facebook"> </a>   
    </li>  
    <li>   
      <a href = "#" class = "fa fa-instagram"> </a>   
    </li>  
    <li>   
      <a href = "#" class = "fa fa-spotify"> </a>   
    </li>  
    <li>   
      <a href = "#" class = "fa fa-youtube"> </a>   
    </li>
  </ul>  
</footer>