我有一个有两列的网格布局.大多数长方体完全对齐，但有一个长方体没有与其相邻长方体对齐，而是显示在网格下方.我已经判断了我的代码，并确保不存在可能导致此问题的页边距或HTML struct 的明显问题.
我已try 删除页边距并仔细判断了我的HTML struct ，但我找不出是什么原因导致此特定框未对齐.如有任何见解或建议，我们将不胜感激.谢谢!
.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>