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