@810311, please permit the following wording change.
More descriptively, changing the width value of the image boxes to 20% should display 5 images per “row”, a width value of 25% should display 4 images per “row”, a width value of 33.33% displays 3 images per “row”, a width value of 50% displays 2 images per “row”, and a width value of 100% displays 1 image the full width of each per row. (Instead of saying “it works”, I have described what I see happening.)
The purpose of the negative word-spacing is to negate the white space nodes between the inline-block boxes. The view at a desktop width (1200px or wider) should show 3 images per row. Without changing the width of the browser window, IF you delete or comment out the negative word spacing, main {word-spacing: -0.5em;}, the number of images per row should change from 3 to 2, the width of the images will not change, and you will see lots of white space space between them.
A characteristic: IF you increase the value of negative word spacing to a larger negative value than is needed, there should be no change in the spacing between the images. I usually use -0.5em.
This technique was first discussed by @PaulOB in his “Test Your CSS Skills Number 35”.
CSS - Test Your CSS Skills Number 35 - inline-block CSS challenge.
There have been other discussions more recently.
Please NOTE that I have talked about inline-blocks because you reported no change in the appearance of the page when changing the -0.5em value (the negative word-spacing technique).
You should have seen this:
As you have discovered, nowadays flex is the better choice!