text_area内での改行表示方法についてご教授お願い致します。

前提・実現したいこと

text_areaに入力した文字の改行を、左寄せで画面に反映させたいのですが、添付画像のように一行目だけ中央から出力されてしまいます。
以下のような表示に変更するにはどうしたらいいでしょうか？

⬇︎完成イメージはこんな感じです⬇︎

・パン
・卵
・塩胡椒
・マヨネーズ

発生している問題

現在、投稿形式のアプリケーションを作成しています。
text_areaにて文字を投稿すると、改行は反映されたのですが一行目だけ中央から入力されてしまいます。

改行は詳細表示画面にて white-space: pre-wrap;
左寄せ入力はnew.cssにてtext_align: left;を指定しました。

該当のソースコード

new.html.erb

<div class="field">
  <div class="field_title">
    <%= f.label :title, "料理名", class:"recipe-title" %><br />
    <%= f.text_field :title, id:"cook_title", class:"title_field" %>
  </div>
</div>

new.css

.title_field {
  height: 40px;
  width: 270px;
  margin: 15px;
  border: 1px solid rgb(155, 155, 155);
  background-color: #ffffff;
  text-align: left;
}

.input-tag {
  height: 30px;
  width: 240px;
  margin: 15px;
  border: 1px solid rgb(155, 155, 155);
  background-color: #ffffff;
  text-align: left;
}

show.html.erb

        <div class="recipe__body">
          <div class="recipe__materials">
           <p class="recipe__material">材料</p>
            <div class="materials">
              <%= @recipe.material %>
            </div>
          </div>
        </div>

show.html

      <div class="recipe__materials">
       <p class="recipe__material">材料</p>
        <div class="materials">・パン ・卵 ・塩胡椒 ・マヨネーズ</div>
      </div>

show.css

.recipe__body {
  margin: 30px 0 60px 270px;
  padding: 30px;
}

.recipe__materials {
  background-color: #ffffffb9;
  margin: 15px;
  padding: 0 15px 15px;
}

.materials {
  color: #364c63;
  padding: 15px;
  line-height: 1.7;
  white-space: pre-wrap;
}

p.recipe__material {
  color: #364c63;
  margin: 15px;
}