Image sticks out of border – CSS

body {
  margin: 0px;
}

div.container {
  height: 100vh;
  background-image: url("https://i.imgur.com/AQI5SzX.jpeg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

div.whitebox {
  position: relative;
  left: -5%;
  width: 75%;
  height: 75%;
  background-color: white;
  border-radius: 3%;
  /*here is the change */
  /*here is the change */
  /*here is the change */
  overflow: hidden;
}

div.titleclass {
  position: relative;
  height: 30vh;
  overflow: hidden;
}

div.overlay {
  position: absolute;
  background-color: #bdb76b6b;
  background-image: url("https://i.imgur.com/vah2G4d.jpeg");
  background-blend-mode: screen;
  background-size: cover;
  opacity: 0.9;
  transform: rotate(7deg) translate(-2.3%, -20%);
  height: 50vh;
  width: 105%;
}

div.title {
  font-family: "Rockwell";
  font-size: 3.5vw;
  text-align: left;
  color: #006400;
  font-weight: 400;
  font-style: normal;
  position: relative;
  top: 25px;
  left: 20px;
}

<div class="container">
  <div class="whitebox">
    <div class="content">
      <div class="titleclass">
        <div class="overlay"></div>
        <div class="title">MODULO ISCRIZIONE SOFTAIR</div>
      </div>
    </div>
  </div>
</div>
<script src="Modulo_softair_rework.js"></script>