Какое отличие между max-width и width?

Отличие между max-width и width заключается в том, что width устанавливает фиксированную ширину элемента, тогда как max-width определяет максимальную ширину элемента.

Если добавить стиль .photo { width: 370px; } без max-width, то ширина картинки будет фиксированной и составит 370 пикселей. Однако, если к этому стилю добавить max-width, например max-width: 100%;, то картинка будет растягиваться только до максимальной ширины родительского элемента. Если ширина родителя меньше 370 пикселей, то картинка будет автоматически уменьшена до ширины родителя.

Проблема, с которой вы сталкиваетесь, возможно связана с тем, что max-width ограничивает максимальную ширину элемента. Если вы установили фиксированную ширину .photo { width: 370px; } и добавили max-width: 100%;, но родительский элемент имеет ширину меньше 370 пикселей, то картинка не сможет растянуться на 370 пикселей и будет иметь ширину родителя.

Если вы хотите, чтобы ширина картинки всегда была 370 пикселей и не зависела от размеров родительского элемента, то вам необходимо использовать только width: 370px; без max-width.

потому что у вас сайдбар резиновый. Задано условие max-width: 370px; Т.е. он подстраивается под внутренние размеры. Всё хорошо если у картинки max-width: 370px;, т.е. у неё фактически не 370px. Если задать фиксированную длину фото то сайдбар подстроится под неё. А вот почему размер уменьшается это вам надо внимательно посмотреть все стили. Может быть у фото фактический размер 318px. Проверьте, задано ли свойство дисплей всем участникам этого шоу. В первую очередь фото. Посмотрите так же не указано где-либо свойство display: flex, если да, то замените на block. Этот flex очень коварный. С одной стороны он делает что-то хорошее, а с другой, изменить это что-то хорошее невозможно или очень трудно, можно, но тогда прийдётся всё ломать. А если смысл в этой ломке? Короче этот flex большая морока. Внимательно проверьте все стили, если очень надо то покопайтесь и в js. Может где-то какое-то ограничение на фотку стоит. Та не может, а стоит, не обязательно в скрипте, может в стилях. Иногда стили не отображаются, например img:hover или :focus. Эти hover или :focus в большинстве случаев не видны, в DevTools редко показываются. Стоит где-нибудь img:focus и никаким образом ты это не увидишь. Попробуйте принудительно сказать что фото width: 370px; Так же для проверки можете !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.