Ширина блока div относительно размера страницы

Здравствуйте!

Подскажите пожалуйста, на странице в несколько рядов, размещено по 100 картинок в каждом ряду, примыкающих друг к другу. Картинки размером 10х10.

При уменьшении размера экрана часть картинкок раньше перескакивали с своего ряда на нижний, подстраиваясь под размер экрана.

Мне нужно было, чтобы при уменьшении размера экрана, количество картинок в одном ряду не уменьшалось, а оставалось строго 100 картинок в каждом ряду.

Эту проблему я решил, добавлением в стили CSS, блока:

#boxShadowtext {
width: 100%;
max-width: 1030px;
min-width: 1030px;
margin: 1em auto;
padding: 1em;
border-radius: 10px;
background: rgb(255,245,237) radial-gradient(circle at 50% , rgba(255,255,255,.65), rgba(255,255,255,.35));
box-shadow:
inset rgba(0,0,0,.6) 0 -3px 8px,
inset rgba(252,255,255,.7) 0 3px 8px,
rgba(0,0,0,.8) 0 3px 8px -3px;
}

И с помощью <div id="boxShadowtext"> упаковал все картинки на странице в этот блок с уже строго заданными размерами по ширине 1030px;

Теперь количество картинок в каждом ряду по 100 зафиксировано блоком boxShadowtext, но при уменьшении размера экрана блок boxShadowtext вместе с картинками в нем вылазит за пределы экрана, страница эта: Картинки или вот скрин выходящего блока за пределы сайта при уменьшении экрана: image — imgbb.com

Вопрос: Как можно сделать, чтобы блок boxShadowtext с картинками расположенными в нём, автоматически уменьшался в размерах, под разные размеры экрана, но чтобы количество картинок при этом в ряду не уменьшалось и оставалось равное 100 шт? То есть, чтобы сам блок с содержимым просто уменьшался в размерах при уменьшении экрана.

Заранее спасибо за ответ.