How can I make the image shrink evenly from both ends when the screen is reduced?

Question

css

Faced such a problem, when the screen is reduced to 670px, the image decreases evenly. When the screen resolution reaches 670px, the image in the block occupies the entire width of the screen. And when I continue to reduce the screen size, in the code inspector, the picture is already not reduced evenly, but is compressed only from the right side. At first I thought that it did not allow it to occupy the entire width of the menu block, but when I reduced its width, nothing changed. Only the menu block itself has become smaller in width. How can this situation be corrected?
Here are screenshots from the inspector


Here is part of the HTML markup

And the styles for the markup above

I don’t understand why

Answer 1

width: 100vw;
min-width: 100vw;

Answer 2

I understand that the picture is pressed to the left edge. And if you center it, then it will be in the center of the block.
You can center in many ways. The easiest way is to add the ALIGN=center option to the IMG tag.