画像の横に表示している文字が文字数によってズレる

Question

前提・実現したいこと

レスポンシブで画像の横に文字を入れようとしています。

スマホビューでのレイアウトは崩さずに、
PC画面での説明文は、画像と説明文の間隔を統一したいです。

発生している問題・エラーメッセージ

スマホビューでは問題ないのですが、PCで見た際に、
画像の横に入れている説明文が文字数によって、画像との間隔が違ってしまいます。

該当のソースコード

<div class="function-flex">
　<div class="function-item">
　　<img src="画像URL">
　</div>
　<div class="function-item">
　<h2>見出し</h2>
　<p>説明文テキストテキストテキストテキスト<br>
　テキストテキストテキスト</p>
　</div>
</div>

.function-flex{
  max-width: 80%;
  margin: 0 auto ;
}
.function-flex img{
  max-width: 200px;
  display: block;
  margin: 0 auto ;
}
@media screen and (min-width: 600px){	
.function-flex{
  display:flex;
  flex-wrap:nowrap;
  justify-content:space-between;
  }
.function-item+.function-item{
  margin-left:1.0em;
  }
}

Answer 1

このようにしてみてはどうでしょうか？

.function-flex {
	display: flex;
	flex-wrap: nowrap;
	/* justify-content: space-between; 削除 */
}

Comments

[xyxyanaxyx]

有難うございます！解決しました！

[Lhankor_Mhy]

お役に立てたようで何よりです。