imageをwidth:3３%;で、３分割したい

Question

    <div class="a">
    <img src="a.jpg">
    </div>
    <div class="shop">
    <h2>お店について<BR>
   <span>ABOUT</span></h2>
    <ul class="image">
        <li><img src="b.jpg"><h3>CAFE</h3><p>ゆったりした時間が流れるカフェテリア</p></li>
        <li><img src="c.jpg"><h3>SWEETS</h3><p>パテｲシエ特製のスイーツ</p></li>
        <li><img src="d.jpg"><h3>BOOK</h3><p>洋書専門のブックストアを検索</p></li>
    </ul>
    </div>

.image {
    padding:0;
    text-align:center;
    margin:0 auto;
    display:flex;
    justify-content:space-between;
    width:1100px;
    font-family: 'Noto Sans JP', sans-serif;
}

.image li {
    list-style:none;
    height:auto;
    width:32%;
}

imageに、上の画像と同じ1100pxを指定して、image liにwidth:32%を指定、heightにautoを指定したのですが、画像の幅が、最後の３つ目が横にすごく長く、heightは、縦に全部長いです。
どうすれば、きちんとなりますでしょうか。

Comments

[m.ts10806]

すごくー
とか
きちんとー
とか、個人の感覚でしかないので、完成予定図と現状を提示してください。質問は編集できます。
あと、ポンポン質問投げられてますが、もう少し考えて理解されたほうが良いのでは。
丸投げしてる印象が非常に強いです。

[K_3578]

前の質問でも指摘しましたが、まず自分で調べて、どういう事を試して、その上で何が分からないのかを
書いてください。

Answer 1

過去の質問群を見ました。
メンターを雇うか、プログラミングスクールがおススメかなと思います。
がんばってください。

以下蛇足です。
この質問をクリアされるためには恐らく真面目に組んだCSSのコードが必要になりますが、
そのコードをもらった後に完成するまでまた連続で別の質問が出るでしょうから、
初めから誰かできる人を雇った方が良いと思いますよ。

「何も分からん、全部教えてくれ！」のスタンスはここには相応しくないです。

何もわからず手探りなのであれば、まずサンプルコードをカスタマイズしてみましょう。
やりたいことを検索してみるか、マークアップ言語のリファレンスを読みましょう。
さすがに０から教えてくれる人はなかなかいませんよ。
繰り返しになりますが、がんばってください。

Answer 2

とりあえず下記のようにしたらどうでしょうか。

.image {
    padding:0;
    text-align:center;
    margin:0 auto;
    display:flex;
    justify-content:space-between;
    max-width:1100px; /* 修正 */
    font-family: 'Noto Sans JP', sans-serif;
}

.image li {
    list-style:none;
    height:auto;
    width:32%;
}

/* 以下追加 */
.image li img {
    width:100%;
}

上記でご希望のレイアウトと違うなら、それぞれの画像のサイズを質問に追記してください。
それぞれの画像のサイズ（縦横比）が違うなら、どのようなレイアウトが最終希望なのか画像を提示してください。