CSS white-spaceについて

Question

フォームで送った値をwhite-spaceで改行させて表示させたいのですが、
1行目の横に謎の空白ができてしまいます。

↓まずフォームでこう送ります。


↓するとこう表示されます。緑枠内がlongクラスです。

↓青部分がprofile-item-textクラスです。（オレンジがマージン）

どこかおかしい部分ありますでしょうか？

.long{
  height:160px;
 .profile-item-text{
   height: 120px;
   width: 50%;
   margin: 0 auto;
   text-align: left;
   white-space: pre-wrap;
   overflow: scroll;
  }
}

ちなみにこれはもう少し親クラスがあって、省略せずに書くと以下の通りです。

.profile-item-wrapper{
        display: flex;
        flex-wrap: wrap;
        .profile-item{
          flex: auto;
          width:50%;
          height:70px;
          padding:10px;
          box-sizing: border-box;
          text-align: center;
          font-size: 14px;
          h5{
            font-size:15px;
            border-bottom: 1px solid #DCC2FF;
          }
        }
        .long{
          height:160px;
          .profile-item-text{
            height: 120px;
            width: 50%;
            margin: 0 auto;
            text-align: left;
            white-space: pre-wrap;
            overflow: scroll;
          }
        }
      }

<div class="profile-item-wrapper">

  <div class="profile-item">
   <h5>性別</h5>
   <%= @user.gender %>
  </div>

  <div class="profile-item">
   <% if @age %>
    <%= @age %>歳
   <% end %>
  </div>

  .
  .
  .

  <div class="profile-item long"> <!-- text型のものだけlong -->
   <h5>趣味</h5>
   <% if @user.favorite %>
    <div class="profile-item-text">
     <%= @user.favorite %>
    </div>
   <% end %>
  </div>

  

</div>

Comments

[kei344]

フォームのHTMLも提示してください。

[popomarudasi]

すみません、忘れていました。
追記しました。
よろしくお願い致します。

[popomarudasi]

すみません、解決しました。
ありがとうございます。

Answer 1

<div class="profile-item-text">
 <%= @user.favorite %>
</div>

部分を

<div class="profile-item-text">
 <p><%= @user.favorite %></p>
</div>

に修正し、解決できました。
ありがとうございました。