Webページのレイアウト崩れを直したい

Question

前提・実現したいこと

HTML,CSSの学習でisaraというサイトの模写をしています。
「講座の流れ」(about-sevenクラス)の部分でレイアウトが崩れているのを直し、見本のサイトのようにしたいです。

該当のソースコード

ソースコード
<div class="about-seven">
        <div class="float">
            <h1>受講の流れ</h1>
            <img src="isara_img/flow.jpg">
        </div>

        <div class="flow-wrapper">
            <div class="flow">
                <img src="isara_img/skypeconsulting.png">
                <h2>Skypeで事前コンサル</h2>
            </div>
            <div class="flow-text">
                <h2>現在のスキルの状況、パソコンの環境説明、渡航での注意点を話します。</h2>
                <h2>簡単なテストあり</h2>
                <p>iSaraでは受講料を稼げることを保障しています。従って、事前コンサル時点で簡単なテストを実施し、場合によってはお断りをしております。（テストの内容はPCの基礎知識に関するテストですので、普段からパソコンを利用する方でしたら問題ありません。テストはもちろん無料ですので、まずはお問い合わせください。）</p>
            </div>
        </div>
        <div class="flow-wrapper">
            <div class="flow">
                <img src="isara_img/preworks.png">
                <h2>事前課題の提出</h2>
            </div>
            <div class="flow-text">
                <h2>出発前の１ヶ月前に事前課題を送ります。</h2>
                <p>０から始めるプログラミング事前学習講座、環境構築の事前学習、jQueryの事前学習講座、Bootstrapの事前学習講座、PHP / Mysqlの事前講座</p>
                <h2>課題は多いですが、ここで努力が必須です。プログラミングは高付加価値なスキルです。そのためには学習が必須です。回数無制限のチャットサポート付きですので、最初は努力してください。また、参加者グループコミュニティも作成するので、横の繋がりでモチベーションを高めることもできます。</h2>
            </div>
        </div>
        <div class="flow-wrapper">
            <div class="flow">
                <img src="isara_img/flight.png">
                <h2>現地に渡航</h2>
            </div>
            <div class="flow-text">
                <h2>到着日には空港でお出迎えし、初日のオリエンテーションを行います。滞在先は空港からすぐの出来たてシェアハウス。美味しいタイ料理などもご紹介します。</h2>
                <h2>iSaraは『ノマド』フリーランス養成講座です。 楽しいノマド体験ができるよう、バンコクでの生活はこちらでサポートします。</h2>
            </div>
        </div>
        <div class="flow-wrapper">
            <div class="flow">
                <img src="isara_img/personwithlight.png">
                <h2>実案件を通して学ぶ</h2>
            </div>
            <div class="flow-text">
                <h2>現役フリーランスが抱える案件に加え、クラウドソーシングを使って実案件をこなします。</h2>
                <h2>案件獲得のためのメールの書き方や見積りの仕方など、<br>他のプログラミングスクールでは教えてくれない実務スキルを学ぶことができます。</h2>
                <p>＊現役フリーランスがサポートします。</p>
            </div>
        </div>
        <div class="flow-wrapper">
            <div class="flow">
                <img src="isara_img/jobsupport.png">
                <h2>帰国後の仕事獲得サポート付き</h2>
            </div>
            <div class="flow-text">
                <h2>経験年数の少ないフリーランスが高単価で継続的に仕事受注するコツ、それがチームを組むことです。</h2>
                <h2>iSaraではフリーランスコミュニティを形成し、帰国後のエンジニアでも継続的に稼げる仕組みを提供します。</h2>
                <h2>もちろん、個人で十分に稼げるようになった場合はいつでも脱退できますし、制限などは何もありません。</h2>
            </div>
        </div>
    </div>

コード
.flow-wrapper {
    padding: 10px 35px;
    margin: 0 5%;
    display: flex;
    background-color: #fef5e0;

}

.flow-wrapper p {
    font-size: 14px;
}

.flow-wrapper h2 {
    font-size: 16px;
}

.flow {
    padding:40px 60px;
}

.flow-text {
    text-align: left;
}

試したこと

text-aline: left;を用いて左端をそろえた。
flowクラスのwidthを200pxに統一した。

補足情報（FW/ツールのバージョンなど）

![イメb5531def8ee45ed65fbd68d5fb570c98.png)

実際の画像です。
flowクラスのimgはもとはすべて同じサイズの画像を使用していました。
けれど使用するにあたり大きさが変わりました。

Answer 1

下記でどうでしょう。

.flow {
    padding:40px 60px;
    flex: 0 0 200px; /* 追加 幅を200pxに固定 */
}

/* 以下追加 */
.flow img　{
  width: 100%; /* 親の幅一杯に広げる */
}

親要素(フレックスコンテナー)にdisplay: flex;で横並びにしてますが、flexは子要素の幅に応じて拡張/縮小させて余白を埋めるようにしますので、子要素の幅が異なる場合、デフォルトでは幅が固定できません。

flexプロパティで拡張/縮小しないように設定します。

flex - CSS: カスケーディングスタイルシート | MDN

Answer 2

flowクラスのimgはもとはすべて同じサイズの画像を使用していました。

その時は「レイアウト崩れ」は無かったが、

けれど使用するにあたり大きさが変わりました。

となってしまった結果、質問の画像のように説明の文字の部分がずれてしまったと言ってますか？

であれば img 要素の width 属性を同じ値に設定してはいかが？