Image sticks out of border - html

Question

The image goes out of a white border and I want it to be inside:
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%;
}
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>

Answer 1

get rid of height:75% and use top to reposition
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%;
top:-25%;
width: 75%;
background-color: white;
border-radius: 3%;
}
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>

Answer 2

Add overflow:hidden to parent div which has the border radius.
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>