потому что у вас сайдбар резиновый. Задано условие max-width: 370px; Т.е. он подстраивается под внутренние размеры. Всё хорошо если у картинки max-width: 370px;, т.е. у неё фактически не 370px. Если задать фиксированную длину фото то сайдбар подстроится под неё. А вот почему размер уменьшается это вам надо внимательно посмотреть все стили. Может быть у фото фактический размер 318px. Проверьте, задано ли свойство дисплей всем участникам этого шоу. В первую очередь фото. Посмотрите так же не указано где-либо свойство display: flex, если да, то замените на block. Этот flex очень коварный. С одной стороны он делает что-то хорошее, а с другой, изменить это что-то хорошее невозможно или очень трудно, можно, но тогда прийдётся всё ломать. А если смысл в этой ломке? Короче этот flex большая морока. Внимательно проверьте все стили, если очень надо то покопайтесь и в js. Может где-то какое-то ограничение на фотку стоит. Та не может, а стоит, не обязательно в скрипте, может в стилях. Иногда стили не отображаются, например img:hover или :focus. Эти hover или :focus в большинстве случаев не видны, в DevTools редко показываются. Стоит где-нибудь img:focus и никаким образом ты это не увидишь. Попробуйте принудительно сказать что фото width: 370px;
.photo {
width: 370px !important;
}
Так же для проверки можете !important прописать всем тегам, принимающим участие в шоу. И не понятно, зачем фотке задавать размер в px. У вас я вижу и контейнеру задано width: 1230px; Как вы с такими размерами собираетесь делать адаптивную вёрстку? Никак. Чтобы всё было подогнано под размеры экрана надо первоначально задать в %. Или в px до определённого размера экрана, чтоб меньше морочиться с адаптацией. У контейнера длинна width: 100%; У фотки допустим 20%, или мах-width: 20%. То же самое и с сайдбаром. мах-width: 20%. Хотя обычно сайдбар имеет width: 20%. Зачем сайдбару подстраиваться под содержание. Посмотрите может где-то задано padding, не обязательно фотке, участникам тоже. padding, margin, min-width, где-нибудь before или after, проверьте их тоже на вшивость. text-align: justify; При justify получаются нерегулируемые отступы. Свойство float, может где-то что необтекается. Или наоборот наезжает. box-shadow. Обязательно обратите внимание position. Хотя здесь может быть и не влияет. line-height, transform, font-size, font-weight, чрезмерная или наоборот жирность увеличивает или уменьшает объекты, font-family, vertical-align, может задано vertical-align и параметр в px или в %, em, и т.д. Например vertical-align: 5px. Может у картинки бордер стоит. надо фотку помещать в блок, не обязательно div, можно p, span и пр., чтоб размер задавать не фотке а блоку, а фотке сделать 100%. Может задано свойство clip, которое обрезает фотку, transition. Может стоит медиа запрос, типа
media screen and (max-width: 900px), что мол при таком-то размере экрана фотка или участник шоу имеет другой размер, text-decoration, animation, text-transform, list-style-type, может задано disc или circle, где-то. white-space, word-wrap. Короче ищите. Для начала укажите всем участникам !important, в первую очередь картинке. Если задано display: block укажите display: inline-block, или наоборот. И обязательно, у картинки должно присутствовать свойство display.
Средний
