Изображение выходит за границы при уменьшении ширины сайта

Когда ширина ровна 610px все хорошо, но после картинка выходит за пределы.

Пробовал с помощью media-запроса уменьшить ширину картинки, но почему-то не уменьшалось.

body {
  margin: 0;
  padding: 0;
  background-color: black;
}

#start {
  display: flex;
  flex-wrap: wrap;
  gap: 200px;
  margin-bottom: 200px;
  justify-content: center;
}

#main_img {
  width: 900px;
  margin-top: 20px;
}

#title {
  text-align: center;
  flex-grow: 1;
}

h1 {
  font-size: 70px;
  font-family: 'Courier New', Courier, monospace;
  margin-bottom: 0;
  color: chocolate;
}

#org_title {
  margin-top: 0;
  font-size: xx-large;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  color: chocolate;
}

#navigation {
  display: flex;
  justify-content: center;
  color: black;
  background-color: chocolate;
  height: 400px;
  flex-basis: 300px;
  border: 6px double black;
  border-radius: 14px;
}

.characters {
  text-align: center;
}

#nav_list {
  display: flex;
  flex-direction: column;
  padding: 0;
  text-align: center;
  list-style: none;
  gap: 40px;
}

a {
  font-weight: 600;
  color: black;
  font-size: 24px;
  font-family: 'Courier New', Courier, monospace;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

@media (max-width: 2000px) and (min-width: 1411px) {
  #navigation {
    position: relative;
    top: 300px;
    right: 150px;
  }
}

@media (max-width: 960px) {
  #start {
    flex-direction: column;
    align-items: center;
  }
  #navigation {
    flex-basis: 300px;
    width: 300px;
  }
  #main_img {
    transition: all 200ms;
    width: 600px;
  }
  #last_img {
    width: 600px;
  }
}

@media (max-width: 632px) {
  .description_img {
    width: 400px;
  }
  .main_img {
    width: 400px;
  }
  .last_img {
    width: 400px;
  }
}

.characters {
  font-size: 30px;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

main {
  display: flex;
  flex-wrap: wrap;
  gap: 250px;
  flex-direction: column;
}


/* #Rintaro_Okabe {
        width: 800px;
        margin-left: 50px;
    }
    
    #Kurisu_Makise {
        text-align: right;
        width: 800px;
        align-self: flex-end;
        margin-right: 50px;
    }
    
    #Itaru_Hasida {
        width: 800px;
        margin-left: 50px;
    }
    
    #Mayuri_Sina {
        text-align: right;
        width: 800px;
        align-self: flex-end;
        margin-right: 50px;
    } */

#Rintaro_Okabe,
#Itaru_Hasida {
  display: flex;
  width: 80%;
  flex-direction: column;
  margin: auto;
  align-items: center;
  line-height: 36px;
}

#Kurisu_Makise,
#Mayuri_Sina {
  display: flex;
  width: 80%;
  flex-direction: column;
  margin: auto;
  align-items: center;
  line-height: 36px;
}

.name {
  color: chocolate;
  font-size: 35px;
}

.description {
  color: chocolate;
  font-family: 'Courier New', Courier, monospace;
  font-size: 16px;
}

#quotes {
  color: chocolate;
  font-family: 'Courier New', Courier, monospace;
  font-size: 16px;
}

.quote_li {
  color: chocolate;
  font-style: italic;
}

.description_img {
  width: 600px;
  margin-bottom: 20px;
  border: 4px solid chocolate;
  border-radius: 15px;
}

footer {
  margin-top: 200px;
}

#last_img {
  display: block;
  margin: 0 auto;
}

#begin {
  display: block;
  text-align: center;
  font-size: xx-large;
  font-family: 'Courier New', Courier, monospace;
  flex-basis: 100%;
  color: chocolate;
  margin: 100px 0px;
}

#begin:hover {
  text-decoration: underline;
}
<header id="start">
  <div id="title">
    <h1>Врата Штейна</h1>
    <p id="org_title">Steins Gate</p>
    <img id="main_img" src="https://picsum.photos/1200/600?random=1" alt="" />
  </div>
  <div id="navigation">
    <div id="main_characters">
      <h2 class="characters">Главные герои</h2>
      <ul id="nav_list">
        <li class="nav_li"><a href="#Rintaro_Okabe">Ринтаро Окабэ</a></li>
        <li class="nav_li"><a href="#Kurisu_Makise">Курису Макисэ</a></li>
        <li class="nav_li"><a href="#Itaru_Hasida">Итару Хасида</a></li>
        <li class="nav_li"><a href="#Mayuri_Sina">Маюри Сина</a></li>
      </ul>
    </div>
  </div>
</header>
<main>
  <article id="Rintaro_Okabe">
    <h2 class="name">Ринтаро Окабэ</h2>
    <img class="description_img" src="https://picsum.photos/1200/600?random=2" alt="Rintaro_Okabe" />
    <p class="description">
      Восемнадцатилетний студент первого курса Токийского электротехнического университета, но уже ощущает себя не только гениальным, но и, как это принято у гениев, — сумасшедшим учёным. Доказывает это он рассказами о таинственной «организации», которая неусыпно
      следит за студентом. Основатель «Лаборатории гаджетов будущего». Любит поговорить по телефону сам с собой и посмеяться как настоящий безумец. Его не всегда устраивает собственное имя, и он зовёт себя Кёма Хооин (яп. 鳳凰院 凶真), что можно перевести
      как «Феникс жестокой реальности». А вот его подруга детства Маюри (позже к ней присоединяется Дару) называет гения «Окарин», просто соединив первые буквы его имени и фамилии. Практически не выходит из своей «Лаборатории гаджетов будущего», поэтому
      его легко издалека узнать по белому лабораторному халату.
    </p>
    <p class="description">Цитаты</p>
    <ul id="quotes">
      <li class="quote_li">“Это выбор Врат Штейна!” – Коронная фраза Окабе.</li>
      <li class="quote_li">“Я великий безумный учёный, Хооин Кёма!”</li>
      <li class="quote_li">“Гениальная извращенка” – Окабе говорит Курису.</li>
      <li class="quote_li">“Это интеллектуальный напиток для избранных” – Окабе о Dr. Pepper.</li>
      <li class="quote_li">“Эм… Hey mister, I am mad scientist. It’s soo COOOL! Sonuvabitch.” – Окабе торговцу значками, на ломаном английском.</li>
    </ul>
  </article>
  <article id="Kurisu_Makise">
    <h2 class="name">Курису Макисэ</h2>
    <img class="description_img" src="https://picsum.photos/1200/600?random=2" alt="Kurisu Makise" />
    <p class="description">
      Член «Лаборатории гаджетов будущего» № 004. Возраст — 18 лет. Талантливая исследовательница неврологии в американском университете. Когда ей было 17 лет, её исследование было опубликовано во всемирно-известном журнале «Science» (в аниме название заменено
      на «Sciency»). Окабэ часто называет её ассистентом или придуманным им прозвищем — Кристина (саму Курису это очень раздражает). На первый взгляд — спокойная девушка, краснеет, если кто-то незнакомый приближается к ней слишком близко, но в душе —
      полная противоположность: однажды заставила Окарина стоять на коленях три часа подряд, при этом грозясь ударить его книгой. Всегда стоит на своём, не любит проигрывать и не любит, когда кто-то пытается управлять ею.
    </p>
    <p class="description">Цитаты</p>
    <ul id="quotes">
      <li class="quote_li">“Произошло что-то серьёзное, если ты зовёшь меня по имени” – Курису говорит Окабе.
      </li>
      <li class="quote_li">“Чувства людей – воспоминания, которые преодолели время.”</li>
      <li class="quote_li">“Время летит так быстро. Сейчас я согласна с Эйнштейном. Время течёт быстрее или медленнее в зависимости от восприятия. Теория относительности такая романтичная. И такая грустная.”
      </li>
      <li class="quote_li">(После поцелуя Окабе) ”Есть научное объяснение этого! Яркие воспоминания, например, первый поцелуй, сохраняются в гиппокампе, и их труднее забыть.”</li>
      <li class="quote_li">“Скажи правильно, Хооуин Трусы-Кёма!” – Курису говорит Окабе</li>
    </ul>
  </article>
  <article id="Itaru_Hasida">
    <h2 class="name">Итару Хасида</h2>
    <img class="description_img" src="https://picsum.photos/1200/600?random=4" alt="Itaru Hasida" />
    <p class="description">
      Известный под прозвищем друзей Дару — девятнадцатилетний подросток, который учится на первом курсе Токийского электротехнического университета. Также является членом «Лаборатории гаджетов будущего», занесённый в список под номером «003», где его «специализация»
      — хакерские взломы. Ведь, несмотря на юный возраст, Дару отлично разбирается и в программном, и в аппаратном обеспечениях компьютера. Но эти умения никак не помогают ему в личной жизни. Неуверенный в себе с излишним весом, Дару просто боится людей
      и общается только с помощью компьютера. Для моральной поддержки выбрал культуру отаку. Дару не социопат и не опасен для общества. Он самостоятельно выбирает нетрадиционный образ жизни вне активного взаимодействия с другими людьми. Он сам навешивает
      на себя ярлык отаку. Это юношеский протест и своеобразный вызов, за которым на самом деле кроется ранимое сердце. И если бы нашёлся неравнодушный человек, он бы смог расшевелить Дару, выведя его из берлоги в люди.
    </p>
    <p class="description">Цитаты</p>
    <ul id="quotes">
      <li class="quote_li">“Это не имеет никакого смысла!.. Умри! Черт возьми!”</li>
      <li class="quote_li">“Human is dead… Mismatch.”</li>
      <li class="quote_li">“Можешь сказать: 'Да кто будет есть твой банан, извращенец?'”- Дару говорит Курису.
      </li>
      <li class="quote_li">“Скажи: 'Твой банан мягкий'.” – Дару говорит Маюри.</li>
    </ul>
  </article>
  <article id="Mayuri_Sina">
    <h2 class="name">Маюри Сина</h2>
    <img class="description_img" src="https://picsum.photos/1200/600?random=5" alt="Mayuri Sina" />
    <p class="description">
      Девушка, в свои шестнадцать лет ставшая членом «Лаборатории гаджетов будущего» под номером «002», сразу за её главой. А всё потому, что она неизменная подруга детства Ринтаро, и за это имеет право называть его лично придуманным именем «Окарин». Себя же
      называет «Маюси». Немного легкомысленна, что может быть следствием её увлечения — косплея, для которого она любит придумывать и шить разнообразные костюмы. Кроме того, Ринтаро про себя шутливо удивляется: «Похоже, у неё действительно ветер в голове».
      Но, по его же словам, несмотря на всю её несерьёзность и глуповатость, Маюри способна, как никто другой, подбодрить и будет рядом, если тебе это нужно. Не сидит ни у кого на шее, самостоятельно подрабатывает в мэйд-кафе, где официантки наряжены
      в костюмы горничных.
    </p>
    <p class="description">Цитаты</p>
    <ul id="quotes">
      <li class="quote_li">“Мы должны устроить мир во всём мире. Например, дать каждому по плюшевому Упе…” –Маюри придумывает желание для Ди-мейла.</li>
      <li class="quote_li">“Посмотри, у нас появилось столько новых друзей: Дару-кун, Крис-тян, Руко-тян, Сузу-сан, Моека-сан, Фейрис-тян, Браун-сан, Наэ-тян. Весной ты выглядел таким одиноким… Но сейчас всё в порядке. Тебе больше не нужна Маюри в качестве заложника.”</li>
      <li class="quote_li">“Посмотри, у нас появилось столько новых друзей: Дару-кун, Крис-тян, Руко-тян, Сузу-сан, Моека-сан, Фейрис-тян, Браун-сан, Наэ-тян. Весной ты выглядел таким одиноким… Но сейчас всё в порядке. Тебе больше не нужна Маюри в качестве заложника.”</li>
      <li class="quote_li">“Посмотри, у нас появилось столько новых друзей: Дару-кун, Крис-тян, Руко-тян, Сузу-сан, Моека-сан, Фейрис-тян, Браун-сан, Наэ-тян. Весной ты выглядел таким одиноким… Но сейчас всё в порядке. Тебе больше не нужна Маюри в качестве заложника.”</li>
    </ul>
  </article>
</main>
<footer>
  <img id="last_img" src="https://picsum.photos/1200/600?random=6" alt="logo" />
  <a id="begin" href="#start">Начало</a>
</footer>


Ответы (2 шт):

Автор решения: HappyPM

Для класса description_img не задавайте строго ширину. Поставьте:

width: 100%;
max-width: 400px;

где 400px это будет ограничитель на нужном разрешении. т.е. где стоит 600px пишите 600px

Заметил что у Вас еще есть id main_img и др. принцип тот же для всех картинок. Ширина ставится 100%, а максимальная ширина уже ограничивается.

→ Ссылка
Автор решения: Andrei Fedorov

Тут не нужны никакие медиа-запросы.

#last_img {
  width: 100%;
  height: auto;
}

И все. Изображение будет не шире своего родительского элемента при любых размерах окна браузера.

→ Ссылка