.products li{ } の時点で実行した場合、画像が重なりはみ出していました。
それを改善するために画像の幅を親要素の li の幅いっぱいに設定し、重なりはみ出しが改善
されていました。

そこでわからないのですが、なぜ画像を li 要素に合わせると重なりはみ出しが改善されるの
でしょうか。
調べてみたのですが解らなかったので質問させていただきました。