Portfolio 실습 2 : SNS Profile 진행 도중 간단한 질문

최우측 하단 작업물 하던 도중이었습니다

<div class="person row">
              <img
                src="/img/profile-pic.png"
                class="col-xl-1"
                style="width: 50%; height: 50%"
              />
              <div class="col-xl-1">
                <p style="font-weight: 600">Jason Deruol</p>
                <p>Developer</p>
                <i class="fas fa-map-marker-alt">Seoul</i>
              </div>
            </div>

여기서 Jason Deruol 이름도 그렇고,
<i class="fas fa-map-marker-alt">Seoul</i> 여기 부분도 그렇고
띄어쓰기만 하면 줄바꿈 처리가 됍니다
width가 혹시 짧아서 그런가? 하고 test 겸 늘려봐도 똑같은 현상이 나타납니다
왜 그런걸까요???