Image doesn't trim according to my screen

Question

I want the image to be visible but I put position:absolute and right:-300px, just to show a part of the image. I don't want to scroll to the right just to show my image, just want to cut it off. I tried overflow:hidden but it doesn't work.

Here is codepen link: https://codepen.io/bogdan-pavel/pen/xxOzeOd

So, it's the image from the right that I'm saying.

<div id="image">
<img src="https://i.ibb.co/3hRJLTK/creata.png" alt="fata creata" style="width:800px; position:absolute; right:-300px;" /> 
</div>

Answer 1

Add overflow-x: hidden; On body

body{
   overflow-x: hidden;
}

Answer 2

You need to make your containers position relative and add overflow hidden.

#allcontent {
    position: relative;
    overflow: hidden;
}