使用display:flex布局时调整图片宽度致页面错乱求助

我正在制作一个火车主题网站，想要添加三张图片，期望实现的布局效果是三张图按特定方式排列。但每次调整图片宽度时，页面布局就会错乱：图片重叠文字、位置混乱等。

我刚开始学习HTML和CSS，知识储备不足，flexbox对我来说还是较新且难理解的内容，知道代码写得很乱，恳请有人帮忙解决。

HTML（结构无需大改） #

<!DOCTYPE html>
<html lang="bg">
<head>
    
    <!--meta data-->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!--tab view-->
    <title>Железопътна страст</title>
    <link rel="icon" href="assets/images/logo.png">

    <!--css files-->
    <link rel="stylesheet" href="assets/css/index.css">
    <link rel="stylesheet" href="components/topbar/topbar.css">

    <!--google fonts-->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Unbounded:wght@200..900&display=swap" rel="stylesheet">

</head>
<body>    
    <!--the top bar-->
    <div class="top-bar">
        <div class="branding">
            <a href="index.html"><img id="logo" src="assets/images/logo.png" alt="Лого на влак"></a>
            <h2 id="title">Железопътна страст</h2>
        </div>
        <div class="nav-bar">
            <a class="nav-button" href="index.html">Начало</a>
            <a class="nav-button" href="#trains">Влакове</a>
            <a class="nav-button" href="#contacts">Контакти</a>
            <a class="nav-button" href="#aboutme">Повече за мен</a>
        </div>
    </div>   

    <div class="sections-container">
        <!--main section container-->
        <div class="main-section">
            <img src="assets/images/home-page.png" alt="снимка на влак">
            <h2 id="motto">Пътувай по релсите на страстта!</h2>
            <p id="about-website">
                Добре дошли на нашия сайт, посветен на магията на влаковете! 
                Тук ще намерите всичко, което може да ви вдъхнови да се 
                потопите в света на железниците. Пътувайте и открийте 
                несравнимото вълнение от всяко пътуване!
            </p>
        </div>
        <div class="image-container">
            <div class="images"><img src="assets/images/N700A.jpg" alt="train named N700S"></div>
            <div class="images"><img src="assets/images/CR400AF.jpg" alt="train named CR400AF"></div>
            <div class="images"><img src="assets/images/TGV-M.jpg" alt="train named TGV M"></div>
        </div>
    </div>
</body>
</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;
    padding-bottom: 2rem; /* 底部加内边距，避免内容贴底 */
}

.sections-container {
    margin-left: 3%;
    margin-top: 3%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 2rem; /* 主内容区与图片容器的间距 */
    flex-wrap: wrap; /* 小屏幕自动换行 */
}

.main-section{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1; /* 占据容器剩余空间 */
    min-width: 300px; /* 小屏幕下的最小宽度 */
}
.main-section #motto {
    text-align: center;
}
.main-section #about-website {
    text-align:justify;
    font-size: large;
    width: 100%;
    max-width: 400px; /* 大屏下文字最大宽度 */
    margin-top: 0px;
    padding: 0 1rem; /* 小屏幕左右内边距 */
}
/* 限制主图片宽度，防止撑破容器 */
.main-section img {
    max-width: 100%;
    height: auto;
}

.image-container{
    display: flex;
    flex-direction: column; /* 垂直排列图片 */
    gap: 1rem; /* 图片之间的间距 */
    align-items: center;
    min-width: 200px;
}
/* 统一图片尺寸，保持比例 */
.image-container .images img {
    width: 200px;
    height: auto;
    object-fit: cover; /* 可选：比例不符时裁剪显示 */
}

• 移除body的固定height:100vh，避免内容溢出时页面被截断，添加底部内边距提升浏览体验
• 为.sections-container添加gap属性拉开间距，设置flex-wrap:wrap适配小屏幕，防止横向溢出
• 给.main-section设置flex:1占据剩余空间，添加min-width保证小屏幕可读性，调整文字容器宽度适配不同屏幕
• 给所有图片添加宽度限制并保留比例，防止变形或撑破容器
• 将.image-container改为垂直排列，添加gap让图片间保持均匀间距

内容的提问来源于stack exchange，提问作者bavanta