Если я верно поняла вашу разметку, то причина в следующем: из-за того, что ширина контейнера #foto
, в котором вы размещаете фотографии, задана динамически (width: 100vw
- то есть, во всю ширину окна), а размеры фотографий и отступы между ними заданы жёстко в пикселях (margin: 60px 100px 50px 130px;
у элемента с классом .file
и width: 200px
у .file
и .file_img
) - в какой-то момент ширина контейнера с чёрной рамкой (как и ширина окна) становится меньше, чем сумма ширин фотографий и расстояний между ними.
В вашем случае (как правильно заметили в комментарии) можно задать свойство margin
для контейнеров с фото .file
в процентах, чтобы оно не было жёстким, а регулировалось в зависимости от ширины блока. Или попробовать вовсе убрать это свойство, поскольку у контейнера с фотографиями вы прописали flex-свойство justify-content: space-around
, что уже означает, что фотографии будут распределены так, чтобы свободное место располагалось поровну вокруг них. Если вы хотите сделать так, чтобы крайние картинки "прижимались" к краям блока #foto
, а остальные располагались между ними с равными расстояниями - попробуйте justify-content: space-between
.
P.S.: если вы прикрепите html-разметку этого фрагмента, то можно будет с большей точностью выяснить, что пошло не так, и дать более действенный совет:)