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

<div class="main-container">
        <div class="me">
          <div>
            < img src="/img/profile-pic.png" />
          </div>

          <div>
            <h3>Killian Sven</h3>
            <p>Front-end Designer</p>
            <p style="color: #6fbaf8; font-weight: 600">서울 마포구</p>
            <button type="button" class="btn btn-info">Contact</button>
          </div>
        </div>

        <div class="sun"></div>

        <div class="my">
          <div class="my-1">
            <p>Location</p>
            <p>Age</p>
            <p>Experience</p>
            <p>School</p>
          </div>

          <div class="my-2">
            <p>서울 마포구</p>
            <p>50년생</p>
            <p>신입</p>
            <p>으악대 우엉과</p>
          </div>
        </div>
      </div>

.main-container {
  border: solid 1px rgba(128, 128, 128, 0.411);
  border-radius: 10px;
  background-color: white;

  width: 100%;
  height: 40%;
  display: flex;
  align-items: center;
  padding: 3%;
}

.me {
  display: flex;
}

.my {
  display: flex;
  margin-left: auto;
  /* margin-right: 1%; */
  justify-content: space-between;
}

.my-1 {
  font-weight: 600;
}

.my-2 {
  /* min-width: 150px; */
  margin-left: 1vw;
}

해당 영역의 html과 css 코드 입니다

my-1 과 my-2 의 간격을 약간 띄워주고 싶은데
margin과 padding을 주면서 px, vw 단위로 하면 잘 됍니다
다만, % 만 주게 되면 my-2에 단위를 주어도 무조건 my-1을 기준으로 삼고 my-2의 위치가 움직입니다
그로 인해 my-2가 계속 찌그러지더라구요 왜 그런지 궁금합니다!
현재는 vw 로 해서 일단 넘어갔습니다