３つの画像を上の画像の幅と一緒にする

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>

.a {
    margin:0 auto;
    text-align:center;
}

.a img {
    width:1100px;
    text-align:center;
 
}


.shop h2 {
    margin-top:50px;
    text-align:center;
    font-size:12px;
    font-family: 'Noto Sans JP', sans-serif;
    margin-bottom:30px;
}

.shop span {
    font-size:35px;
    border-bottom:2px solid gray;
}

.image {
    display:flex;
    justify-content:space-around;
    max-width:1100px;
}

.image li {
    list-style:none;
}

.image img {
    width:300px;
}

.aクラスのimgに対して、1100pxを指定してあるので、この画像と同じ幅に、.image imgの３つ並んでいる画像の１つ目と３つ目の端を揃えたいのですが、簡単なやり方は、ございませんでしょうか。imageのmax-widthを1100pxにして、justify-content:space-aroundにしても、できませんでした。

Comments

[K_3578]

https://developer.mozilla.org/ja/docs/Web/CSS/Reference
とりあえず質問する前にリファレンス見てみたりしてからしてください。

Answer 1

justify-content:space-around;
これを、
justify-content:space-between;
こう。

で、たぶんいけるはず。

以下蛇足です。
flexboxとレイアウトについて調べてみると良いかもです。