CSS Style not being applied completely

I am trying to crop the right side of the embedded website within the iframe with right : -80px;. Everything seems to work but the cropping of the right side.

<html lang="en">
<body>

<style>
 #div-id{
    border   : 2px solid blue;
    width    : 600px;
    height   : 800px;
    position : relative;
    overflow : hidden;
}
 #iframe-id{
    position : absolute;
    top      : -160px;
    right    : -80px;
    left     : -25px;
    width    : 620px;
    height   : 450vh;
}
</style>
<div id="div-id">
 <iframe title="example" src="https://example.org" id="iframe-id" scrolling="yes"></iframe>
</div>

</body>
</html>

I've tried to:

change the right and left to margin-right and margin-left
"Full"-refreshed the browser via ctrl+F5
Changed the value from -80px to many different things to see if it is working at all
Used Edge and Firefox for testing

Solution

Just take away the right because you want to go left.

<style>
  * {
    margin:0;
    padding:0;
  }

  body,html {
    overflow:hidden;
  }
 #div-id{
    border: 2px solid rgb(255, 0, 0);
    width: 40%;
    height: 85%;
    position: relative;
    overflow: hidden;
}

 #iframe-id{
    position: absolute;
    top: -160px;
    left: -80px;
    width: 620px;
    height: 450vh;
}
</style>
<div id="div-id">
 <iframe title="example" src="https://example.org" id="iframe-id" scrolling="yes"></iframe>
</div>

</body>
</html>