
현재 나만의 프로필 만들기 (1-4 링크만들기) 작업하고 있는데요.
css 스타일 태그 안에 클래스명(.main) 적용까지 다 되어있고, 그 밑에 늘 하듯이 margin-top으로 값을 주려는데
태그가 먹지 않고, 도리어 윗줄에 있는 font-size 값에도 영향을 미쳐서 값을 먹이지 않은 사이즈로 돌아가도록 만들더라구요.
보통 ma까지 입력하면 아래에 자동입력으로 margin-top이라고 떠서 그렇게 입력해서 값을 넣곤 했는데,
이 줄에서는 입력해도 margin-top을 선택할 창이 뜨지 않는 점이 좀 이상합니다.
코드가 안 닫혀있다던가 하는 것도 아닌 듯 해요. 문제가 되는 margin-top줄을 지우면 폰트도 적용한대로 돌아옵니다 ㅜㅜ 뭐가 문제일까요.

작성한 코드 및 에러 메세지
<!DOCTYPE html>
<html>
<head>
<!-- 웹페이지 보이지는 않지만, 필요한 설정을 해두는 곳이에요.
우리가 집을 위해 미리 생각 해놓은 것을 적어두는 곳이라고 할 수 있죠!-->
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta property="og:title" content="르탄이 - 프로필 링크" />
<meta property="og:description" content="어서와 코딩은 처음이지?" />
<meta property="og:image" content="공유할 이미지" />
<title>르탄이 - 프로필 링크</title>
<style>
body {
background-color: #44398a;
}
.profile {
width: 100px;
height: 100px;
background-color:#44398a;
border-radius: 100%;
border: 2px solid white;
background-image: url(heart.png);
background-position: center;
background-size: cover;
}
.main {
color: white;
font-size: 20px
margin-top: 30px
margin-bottom: 10px
}
.sub {
font-size: 14px;
color: white;
}
.wrap {
width: 300px;
margin: 30px auto 0px auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="wrap">
<div class="profile"></div>
<h1 class="main">진랑제</h1>
<p class="sub">디자인 좋아하세요...?</p>
</div>
</body>
</html>
