При изменении ширины изображения с помощью дисплея: flex все ломается ⇐ CSS

[Anonymous]

Это желаемый результат. Я бы хотел, чтобы три изображения были расположены именно так. Я делаю сайт для поездов и хочу добавить три изображения. Но когда я добавляю их каждый раз, когда хочу уменьшить их масштаб, все просто ломается: изображения перекрывают текст, они повсюду и т. д.
Я только начал программировать HTML и CSS и мало что знаю, а флексбоксы все еще являются новая и запутанная вещь для меня. Я знаю, что это беспорядок, извините Кто-нибудь, помогите, пожалуйста

Код: Выделить всё

/*fonts*/
@font-face {
font-family: jost;
src: url(../fonts/Jost-Regular.ttf);
}

* {
box-sizing: border-box;
}
body {
background-color: #ffd7c4;
color: #424242;
margin: 0;
font-family:  jost;
height: 100vh;

}

.sections-container {
margin-left: 3%;
margin-top: 3%;
display: flex;
flex-direction: row;
justify-content: flex-start;

}

.main-section{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

}
.main-section #motto {
text-align: center;
}
.main-section #about-website {
text-align:justify;
font-size: large;

width: 400px;
margin-top: 0px;
}

.image-container{
display: flex;
flex-direction:row;
flex-wrap: wrap;
justify-content: center;
width: 200px;

}

Код: Выделить всё

Железопътна страст
















[url=index.html]
[img]assets/images/logo.png[/img]
[/url]
Железопътна страст

[url=index.html]Начало[/url]
[url=#trains]Влакове[/url]
[url=#contacts]Контакти[/url]
[url=#aboutme]Повече за мен[/url]





[img]assets/images/home-page.png[/img]
Пътувай по релсите на страстта!

Добре дошли на нашия сайт, посветен на магията на влаковете!
Тук ще намерите всичко, което може да ви вдъхнови да се
потопите в света на железниците. Пътувайте и открийте
несравнимото вълнение от всяко пътуване!


[img]assets/images/N700A.jpg[/img]
[img]assets/images/CR400AF.jpg[/img]
[img]assets/images/TGV-M.jpg[/img]

Подробнее здесь: https://stackoverflow.com/questions/791 ... ing-breaks