困ったこと

画像とテキストを横並びでflexboxで作るとき、画像の右側に余白ができてしまう。

画像青部分が余白になってしまう。。

解決策

text-align: right;で、画像を右寄せにする

HTML

<div class="wrapper">
<div class="container">
 <div class="image">
   <img src="http://placehold.jp/200x300.png" alt="">
 </div>
 <div class="text">
   <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
   <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
 </div>
</div>
</div>

CSS

.container {
 background-color: gray;
　margin: 60px;
　display: flex;
 justify-content:center;
 
}
.image {
 text-align: right;
 background-color: blue;
 margin: 0 20px;
 
}
.text {
 background-color: red;
   margin: 0 20px;
}

＜PR＞こんな商品もつくっています👇🏻