我有一个两列的网格布局。大多数框完全对齐，但有一个框没有与相邻框对齐，而是显示在网格下方。我已经检查了我的代码，并确保没有明显的问题与利润或HTML结构，可能会导致这个问题。
我已经尝试删除页边距并仔细检查了我的HTML结构，但我无法确定是什么导致这个特定的框未对齐。任何见解或建议将不胜感激。谢谢你，谢谢！

.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>