flexbox内の表示崩れを解消したいです

実現したいこと

PC(1366px),SP(375px)以外での表示崩れを解消したい

ブラウザ幅がある程度長くなった場合、各要素の大きさや長さを固定にして左右の余白を増やすレイアウト（ソリッドレイアウト）にしたいです

・サイズを収縮しても文字の位置が変わらないようにしたいです

ここに質問の内容を詳しく書いてください。
ulで囲ったクラスの中に以下のようにクラスを作っています

テキスト 文字が崩れてしまうテキスト

CSSで下のように囲っているのですが
500pxくらいに引き伸ばしてみると
ボックスの中の文字だけが引き伸ばされてしまいます。

（正しい例）
ホワイトニング専用 LEDライトだから
安全ボタンををカットすべく開発された、
当初専用LEDライトを使用するため熱くなく、
また日焼けすることもありません。
↓
（崩れると）
ホワイトニング専用 LEDライトだから安全ボタンををカットすべく開発された、
当初専用LEDライトを使用するため熱くなく、また日焼けすることもありません。

（逆に詰まりすぎたり）
ホワイトニング専用
LEDライトだから
安全ボタンをを
カットすべく開発された、
当初専用LEDライト
を使用するため熱くなく、
また日焼けすることもありません。

リストに指定しているCSS
li.pic-com {
background-color: #fff;
list-style: none;
padding: 10px 1.2rem 15px;
margin-bottom: 21px;
}

※リスト全体はこのように指定しています
.contents_width {
margin: 0 auto;
max-width: 72rem;
width: 100%;
}

初めての質問でかつ、超初心者のため
わかりにくいところが多いと思うのですが
ご協力いただけると助かります。