<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 로 해서 일단 넘어갔습니다
