[Solved] content-box of a div overlapping other elements

Question

I was making a web project (HTML & CSS & JS used) and so far I added a title, and a div containing an img element that rotates 10 degrees clockwise when (the img element is) clicked and underneath that div is a line break (br) followed by a button.

But I noticed a weird bug where if I click the img element 9 times (rotating it 90 degrees) the button starts ignoring click requests.

I figured out that the reason was that the content-box of the div was too wide and that it overlapped parts of the button when it was rotated at specific degrees, I tried getting rid of the extra width but i couldn't do that without other problems rising: To start off, if i modify the width of the content-box for some reason the div's margin will be present even though i set it to 0% which creates the exact same problem, and my solutions always either modify the original size of the img element or change it's central position.
So the main question is: How do i get rid of the extra width (or at least stop the div from overlapping elements that aren't its children) without affecting the position or size of both the img and the button?

I don't want to show my actual project to anyone at this moment so instead i made a replication of this problem. The red background color is the div's content-box and the blue one is the img's
https://code.sololearn.com/W3Y39iSnGFK7/?ref=app

Answer 1

Another way to change the layout, you can set the container width to 30% and add a margin of auto. Additionally, adjust the width of the img element to 100%.

Just a friendly heads up, the link you provided works fine on the website, but for users accessing this post through apps, it isn't accessible. For better accessibility, please use https://code.sololearn.com/W3Y39iSnGFK7/?ref=app, which is compatible with all platforms.

Answer 2

There is svg picture and with the scale of it are some browser problems. If I understood what your problem is, then you could solve it as follows:

#container {
background-color: rgba(218, 22, 22, 0.404);
display: flex;
justify-content: center;
}

https://code.sololearn.com/Wu4R91FSZRc1/?ref=app

Answer 3

I saw the problem somewhere else and that is in the red background strip under the image. Dronto did you experience it and did you fix it?

Answer 4

This is a bonus for you Dronto . You can view the updated code if you want.

https://code.sololearn.com/Wu4R91FSZRc1/?ref=app

Answer 5

ODLNT Thank you very much for taking your time to solve my problem.
Your solution worked and now the div doesn't overlap the button.

Sure thing, thanks for telling me. I changed it.

Answer 6

JaScript Thank you very much for trying to help and you even made a code bit with the modifications to show me your solution more clearly,
but unfortunately that doesn't solve my problem.

Answer 7

JaScript Yes i did see it but didn't fix it as fixing it is unnecessary.
My main problem was that when the content-box of the div (which is red) rotates 90 degrees it overlaps the button.
But ODLNT gave me a solution that reduced the content-box to a simple strip.
I won't be fixing it because it isn't overlapping anything anymore, and in the original project the red background color for the div isn't here anyway... it's just here so that people viewing the code bit understand the problem better and what exactly is overlapping the button.