index.html

<!DOCTYPE html>
<html>
<head>
  <title>코딩의 민족</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/styles.css">
   
</head>
<body>
    <div class="name">
    <p class="coding">코딩의 민족</p>
    <p class="you"> 넌 코딩할때가 제일 이뻐 </p>
    </div>
   
     <div class="menu">
         <div class="chicken">
        </div>
        <p class="title"> 코딩에 빠진 닭 </p>
        <p class="content"> 주머니가 가벼운 당신의 마음까지 생각한 착한 가격!</p>
       <div class="sort">
       <a class="pay"href="#"> 바로 결제 </a>
         </div>
     </div>
    
    <div class="menu">
         <div class="susi">
        </div>
        <p class="title"> 코코 스시 </p>
        <p class="content"> 주머니가 가벼운 당신의 마음까지 생각한 착한 가격!</p>
       <div class="sort">
       <a class="pay"href="#"> 바로 결제 </a>
         </div>
     </div>
    <div class="menu">
         <div class="hamburger">
        </div>
        <p class="title"> 코데리아 </p>
        <p class="content"> 주머니가 가벼운 당신의 마음까지 생각한 착한 가격!</p>
       <div class="sort">
       <a class="pay"href="#"> 바로 결제 </a>
         </div>
     </div>
    <div class="menu">
         <div class="bab">
        </div>
        <p class="title"> 코딩에 빠진 닭 </p>
        <p class="content"> 주머니가 가벼운 당신의 마음까지 생각한 착한 가격!</p>
       <div class="sort">
       <a class="pay"href="#"> 바로 결제 </a>
         </div>
     </div>
    
</body>
</html>

css/styles.css

@font-face{
    src:url("https://bakey.codeit.kr/web/587/users/204/fonts/BMJUA_otf.otf?dl=0");
    font-family:"BM"
}
* {
  box-sizing: border-box;
    font-family:"BM";
    color:#58595B;
}


Body{
    background-color:#F0E8D9;
}
.coding{
    margin-top:75px;
    margin-bottom:30px;
    font-size:64px;
}
.you{font-size:32px;
    margin-bottom:75px;
}
.name{ text-align:center;
}

.menu{ 
    background-color:white;
       width:300px;
        margin-left:auto;
        margin-right:auto;
        margin-bottom:50px;
        border-radius:10px;
}
.title{
    padding-top:20px;
    margin-bottom:20px;
    text-align:center;
}
.content{
    padding-left:20px;
    padding-right:20px;
    margin-bottom:16px;
}
.chicken{
   
    width:300px;
    height:200px;
    background-image:url("https://bakey.codeit.kr/web/587/users/204/images/chicken.jpg?dl=0");
    background-size:contain;    
    background-repeat:no-repeat;
    margin-left:auto;
        margin-right:auto;
}
.pay{
    text-decoration:none;
    font-size:16px;
    color:#0000EE;
  
    text-align:center;
}
.sort{
    text-align:center;
      padding-bottom:20px;
}
.susi{
   
    width:300px;
    height:200px;
    background-image:url("https://bakey.codeit.kr/web/587/users/204/images/sushi.jpg?dl=0");
    background-size:contain;    
    background-repeat:no-repeat;
    margin-left:auto;
        margin-right:auto;
}
.hamburger{
   
    width:300px;
    height:200px;
    background-image:url("https://bakey.codeit.kr/web/587/users/204/images/burger.jpg?dl=0");
    background-size:contain;    
    background-repeat:no-repeat;
    margin-left:auto;
        margin-right:auto;
}
.bab{
    width:300px;
    height:200px;
    background-image:url("https://bakey.codeit.kr/web/587/users/204/images/bibimbap.jpg?dl=0");
    background-size:contain;    
    background-repeat:no-repeat;
    margin-left:auto;
        margin-right:auto;
}

해당 코드를 바탕으로 요소 검사를 실행해보니

.title 부분인 코딩에 빠진닭 부분이 margin값이 32로 나오더라구요

padding값에 더해서 나오는것 같은데 제가 처음부터 코드를 잘못 짠걸까요?