How to put text higher in div

Issue

I made div where were text and icons and all of them looked how they suppose to, and when I copy & pasted same div and removed some text, but it doesnt look how it suppose to look. All want is to put text higher so it would look better Here is the code: HTML: <

section class="Second">
    <div class="courses">
        <div class="plates">
            <div class="full_course">
               <h2>Full Course</h2></div>
                                
                <div class="course">
                    <img class="course_icon" src="Plate Icons/mathicon.png" alt="mth">
                    <h3>Mathematics</h3>
                </div>
                <div class="course">
                    <img class="course_icon" src="Plate Icons/his.png" alt="hi">
                    <h3>History</h3>
                </div>
                <div class="course">
                    <img class="course_icon" src="Plate Icons/chemis.png" alt="che">
                    <h3>Chemistry</h3>
                </div>
                 <div class="course">
                    <img class="course_icon" src="Plate Icons/bio.png" alt="bi">
                    <h3>Biology</h3>
                </div>
                <div class="course">
                    <img class="course_icon" src="Plate Icons/en.png" alt="en">
                    <h3>English</h3>
                </div>
                <div class="course">
                    <img class="course_icon" src="Plate Icons/phys.png" alt="phy">
                    <h3>Physics</h3>
                </div>
                
                
                
        </div>

        <div class="courses">
            <div class="plates1">
                 <div class="MathPhys">
                          <h2>Math + Physics</h2>
                     </div>
                            <div class="course">
                             <img class="course_icon" src="Plate Icons/mathicon.png" alt="mth">
                             <h3>Mathematics</h3>
                            </div>
                    
                            <div class="course">
                                <img class="course_icon" src="Plate Icons/phys.png" alt="phy">
                                <h3>Physics</h3>
                            </div>
                    
                
          </div>          
        </div>
        <div class="courses">
            <div class="plates2">
                 <div class="MathPhys">
                          <h2>Biology + Chemistry</h2>
                     </div>
                            <div class="course">
                             <img class="course_icon" src="Plate Icons/bio.png" alt="">
                             <h3>Biology</hh3>
                            </div>
                    
                            <div class="course">
                                <img class="course_icon" src="Plate Icons/chemis.png" alt="">
                                <h3>Chemistry</h3>
                            </div>
                    
                
          </div>          
        </div>
        <div class="courses">
            <div class="plates3">
                 <div class="MathPhys">
                          <h2>Biology + Chemistry</h2>
                     </div>
                            <div class="course">
                             <img class="course_icon" src="Plate Icons/bio.png" alt="">
                             <h3>Biology</hh3>
                            </div>
                    
                            <div class="course">
                                <img class="course_icon" src="Plate Icons/chemis.png" alt="">
                                <h3>Chemistry</h3>
                            </div>
                    
                
          </div>          
        </div>
        
    </div>
</section>

CSS:

    .plates {
  margin-left: 140px;
  display: grid;        
  grid-template-columns: 50% 50%;  
  border-radius: 20px;
  width: 512px;
  height: 300px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.plates1 {
  margin-left: 20px;
  margin-top:-281px;
  display: grid;        
  grid-template-columns: 50% 50%;  
  border-radius: 20px;
  width: 512px;
  height: 300px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

}

.plates2 {
  margin-left: 140px;
  margin-top: -250px;
  display: grid;        
  grid-template-columns: 50% 50%;  
  border-radius: 20px;
  width: 512px;
  height: 300px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

}

.plates3 {
  margin-left: 20px;
  margin-top: -250px;
  display: grid;        
  grid-template-columns: 50% 50%;  
  border-radius: 20px;
  width: 512px;
  height: 300px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

}

.courses{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap:1rem;
  margin-top:280px;
}
.course_icon {
  width: 36px;
  height: 36px;
}

.full_course {
  font-family: 'Ubuntu', sans-serif;
  font-weight: bold;
  text-align: center;
  grid-column: 1 / -1; 
}

.MathPhys{
  display: grid;
  font-family: 'Ubuntu', sans-serif;
  font-weight: bold;
  text-align: center;
  grid-column: 1 / -1; 
 
}
.course {
  font-family: 'Noto Sans', sans-serif;
  font-weight: normal;
  margin: 0rem 0rem;
  display: flex;
  align-items: center;
  padding: 2px 40px;
}

.course h3 {
  padding: 0rem 1rem;
}

This is how it suppose to look

This is how it looks

Solution

Here I have made a simple changes in your css code.

.container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap:3rem;
    }

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap:3rem;
}

.plates {
  display: grid;
  grid-template-columns: 50% 50%;
  border-radius: 20px;
  width: 450px;
  height: 290px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.courses {
  margin-top: 100px;
}

.course_icon {
  width: 36px;
  height: 36px;
}

.full_course {
  font-family: 'Ubuntu', sans-serif;
  font-weight: bold;
  text-align: center;
  grid-column: 1 / -1;
}

.MathPhys {
  font-family: 'Ubuntu', sans-serif;
  font-weight: bold;
  text-align: center;
  grid-column: 1 / -1;
}

.course {
  font-family: 'Noto Sans', sans-serif;
  font-weight: normal;
  margin: 0rem 0rem;
  display: flex;
  align-items: center;
  padding: 2px 40px;
}

.course h3 {
  padding: 0rem 1rem;
}

<!DOCTYPE html>
<html lang="en">

<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">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <div class="courses">
            <div class="plates">
                <div class="full_course">
                    <h2>Full Course</h2>
                </div>
                <div class="course">
                    <img class="course_icon" src="Plate Icons/mathicon.png" alt="mth">
                    <h3>Mathematics</h3>
                </div>
                <div class="course">
                    <img class="course_icon" src="Plate Icons/his.png" alt="hi">
                    <h3>History</h3>
                </div>
                <div class="course">
                    <img class="course_icon" src="Plate Icons/chemis.png" alt="che">
                    <h3>Chemistry</h3>
                </div>
                <div class="course">
                    <img class="course_icon" src="Plate Icons/bio.png" alt="bi">
                    <h3>Biology</h3>
                </div>
                <div class="course">
                    <img class="course_icon" src="Plate Icons/en.png" alt="en">
                    <h3>English</h3>
                </div>
                <div class="course">
                    <img class="course_icon" src="Plate Icons/phys.png" alt="phy">
                    <h3>Physics</h3>
                </div>
            </div>
        </div>
        <div class="courses">
            <div class="plates">
                <div class="MathPhys">
                    <h2>Math + Physics</h2>
                </div>
                <div class="course">
                    <img class="course_icon" src="Plate Icons/mathicon.png" alt="mth">
                    <h3>Mathematics</h3>
                </div>
                <div class="course">
                    <img class="course_icon" src="Plate Icons/phys.png" alt="phy">
                    <h3>Physics</h3>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

Answered By - srinithi R