Почему один блок сетки CSS ниже остальных?

.proj-container {
  display: grid;
  grid-template-columns: repeat(2, 427px);
  gap: 2px;
  border-radius: 10px;
  justify-content: center;
  margin-top: 50px;
}

.project-box {
  width: 400px;
  height: 400px;
  border-radius: 5px;
  margin: 20px 0;
  padding: 20px;
  background-color: white;
  border-radius: 30px;
  font-size: 24px;
  cursor: pointer;
  opacity: 0;
  filter: hue-rotate(360deg);
  border-width: 5px;
  border-color: black;
  box-shadow: h-offset v-offset blur spread color;
  border-style: solid;
  opacity: 0.9;
  transition: transform 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease;
  color: black;
  z-index: 100000;
}

.project-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
  z-index: -1;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

<section id = "projects" class = "hidden box3 container responsive" style = "min-height: 10px;">
  <div class = "box3b">
    <div class = "glower">
    </div>
    <div class = "stars">
    </div>
  </div>
</section>

<section id = "projects" class = "hidden proj-container responsive">
  <div class = "project-box" onclick = "redirectToGitHub2()">
    <div class = "projrole">
      <h2>Founder | Developer</h2>
    </div>
    
    <div class = "projdays">
      <h2></h2>
    </div>
    
    <div class = "projused">
      <span class = "material-symbols-outlined">html</span>
      <span class = "material-symbols-outlined">javascript</span>
      <span class = "material-symbols-outlined">css</span>
      <span class = "material-symbols-outlined">database</span>
    </div>
    
    <div class = "photoproj">
      <img src = "img/ticket.png" alt = "Github ticket code." style = "height: 200px; width: 350px; border-radius: 25px;">
      <div class = "projname">
        <h2>IT Ticket Site</h2>
      </div>
    </div>
  </div>
  </div>
  
  <div class = "project-box container responsive" onclick = "redirectToGitHub()">
    <div class = "projrole">
      <h2>Founder | Developer</h2>
    </div>
    <div class = "projdays1">
      <h2></h2>
    </div>
    <div class = "projused">
      <span class = "material-symbols-outlined">html</span>
      <span class = "material-symbols-outlined">javascript</span>
      <span class = "material-symbols-outlined">css</span>
      <span class = "material-symbols-outlined">database</span>
    </div>
    <div class = "photoproj">
      <img src = "img/Banking.png" alt = "Github banking code." style = "height: 200px; width: 350px; border-radius: 25px;">
      <div class = "projname">
        <h2>Banking Website</h2>
      </div>
    </div>
  </div>
  
  <div class = "project-box container responsive" onclick = "redirectToGitHub4()">
    <div class = "projrole">
      <h2>Founder | Designer</h2>
    </div>
    <div class = "projdays3">
      <h2></h2>
    </div>
    <div class = "projused">
      <span class = "material-symbols-outlined">draw_abstract</span>
      <span class = "material-symbols-outlined">preview</span>
      <span class = "material-symbols-outlined">design_services</span>
      <span class = "material-symbols-outlined">details</span>
    </div>
    <div class = "photoproj">
      <img src = "img/icons.png" alt = "Github icon design." style = "height: 200px; width: 350px; border-radius: 15px;">
      <div class = "projname">
        <h2>Icon Design</h2>
      </div>
    </div>
  </div>
  </div>
  
  <div class = "project-box container responsive" onclick = "redirectToGitHub3()">
    <div class = "projrole">
      <h2>Founder | Developer</h2>
    </div>
    <div class = "projdays2">
      <h2></h2>
    </div>
    <div class = "projused">
      <span class = "material-symbols-outlined">html</span>
      <span class = "material-symbols-outlined">javascript</span>
      <span class = "material-symbols-outlined">database</span>
      <a><img src = "https://www.cdnlogo.com/logos/r/63/react.svg" style = "height: 20px;width: 20px;-webkit-filter: grayscale(100%);filter: grayscale(100%);"></a>
    </div>
    <div class = "photoproj">
      <img src = "img/react.png" alt = "Github react code." style = "height: 200px; width: 350px; border-radius: 15px;">
      <div class = "projname">
        <h2 style = "font-size: 25px;">Aegis Authentication</h2>
      </div>
    </div>
  </div>
  
  <hr style = "height:3px;border-width:0;color:rgb(0, 0, 0);background-color:rgb(0, 0, 0)">
  
  <div class = "project-box" onclick = "redirectToGitHub5()">
    <div class = "projrole">
      <h2>Founder | Developer</h2>
    </div>
    <div class = "projdays4">
      <h2></h2>
    </div>
    <div class = "projused">
      <span class = "material-symbols-outlined">html</span>
      <span class = "material-symbols-outlined">javascript</span>
      <span class = "material-symbols-outlined">css</span>
    </div>
    <div class = "photoproj">
      <img src = "img/Assets.png" alt = "Github assets code." style = "height: 200px; width: 350px; border-radius: 25px;">
      <div class = "projname">
        <h2>Pre-Made Assets</h2>
      </div>
    </div>
  </div>
  <div class = "project-box" onclick = "redirectToGitHub5()">
    <div class = "projrole">
      <h2>Founder | Developer</h2>
    </div>
    <div class = "projdays4">
      <h2></h2>
    </div>
    <div class = "projused">
      <span class = "material-symbols-outlined">html</span>
      <span class = "material-symbols-outlined">javascript</span>
      <span class = "material-symbols-outlined">css</span>
    </div>
    <div class = "photoproj">
      <img src = "img/Assets.png" alt = "Github assets code." style = "height: 200px; width: 350px; border-radius: 25px;">
      <div class = "projname">
        <h2>Pre-Made Assets</h2>
      </div>
    </div>
  </div>
</section>