validationのエラーメッセージが左にずれてしまいます。

Question

写真のようにvalidtionのエラー文章が左にずれてしまいます。
そこで私はdisplay:flex;をかけるために新たにエラー文章であるliクラスを包み込む形でerror-alertを作りそれを写真4枚目のcssに書いたdisplay: flex;で対応させようとしました、がしかしうまくいきません????
どなたか理由が分かる方よろしくお願い致します！

ちなみにcssの.error-aleartのなかにはmargin:auto;も追加してますが特に中央によりません????