Schnell ist innerhalb einer Box ein padding links und ein padding rechts hinzugefügt. Was einigen abernicht bewusst ist, dass die padding die width des Containers ebenfalls beinflusst. Aus diesem Grund sollte man, wenn man das nicht wünscht ein box-sizing: border-box; dem Element mit dem Padding hinzufügen.
Bei parent habe ich es nicht hinzugefügt und ihr seht, dass es jetzt hinten rangehangen wurde. Sobald ihr aber box-sizing hinzugefügt habt ist es richtig ausgerichtet. Sieht ja sonst aus wie ein alter Fernseher.
<div class="parent">
<div class="box">123</div>
</div>
.parent {
background: gray;
padding: 20px;
width:100vh;
margin: auto;
}
.box {
width: 330px;
height: 212px;
margin-top: 1px;
margin-left: 22.5px;
background-color: orange;
border-radius:10px;
padding: 10px 8px;
box-sizing: border-box;
}