When I increase the zoom level of my page to 110%, the div inside the larger one keeps getting bigger and eventually moves to a new line. Is there a way to stop it from shifting? If so, please provide guidance on how to fix this issue without criticizing my code.
.movieBox {
border: 1px solid black;
height: 250px;
}
.mBoxPart {
border: 1px solid black;
display: inline-block;
height: 250px;
width: 250px;
}<div style="padding-left: 30px; padding-right: 30px;">
<div class="movieBox">
<div class="mBoxPart" style="float: left;">
</div>
<div class="mBoxPart" style="width: 80%; ">
</div>
</div>
</div>