labelタグとして出力しているフォームにクライアント側の検証があります。彼らは私が望むように表示していますが、それらの幅はその中のコンテンツに自動的に調整されません。これは、フォームが入っているコンテナの幅が原因だと思います。誰かが私がこれを修正するのを手伝ってもらえますか？これがjsFiddleです：
焦点を合わせると、フィールドの外に検証エラーが表示されます。
要素の幅を.home-form-container250pxから450pxに変更すると修正されますが、その要素を広くしたくありません。これはオーバーフローの問題ですか？
メッセージを「block」から「inline-block」に変更してみてください。これでポジショニングの問題が解決したようです。
.field_with_errors .message { display:inline-block; white-space: nowrap; ... }
ブロックレベルの要素はフローを中断しますが（フロートをクリアするようなものです）、インラインブロックは、ブロックレベルのプロパティを維持しながら、その前の要素のフローにそれを保持します。
メッセージが折り返されないようにするには、要素テキストがwhite-space: nowrapプロパティで折り返されないようにします。