I have a grid layout with two columns. Most of the boxes align perfectly, but one box is not aligned with its neighboring box and is instead appearing below the grid. I’ve reviewed my code and made sure there are no apparent issues with margins or HTML structure that could be causing this problem.
I’ve attempted to remove margins and carefully reviewed my HTML structure, but I can’t identify what’s causing this specific box to be misaligned. Any insights or suggestions would be greatly appreciated. Thank you!
.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="https://stackoverflow.com/questions/77151005/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>
Remove your hr tag
Remove this tag, it will fix your layout
<hr style="height:3px;border-width:0;color:rgb(0, 0, 0);background-color:rgb(0, 0, 0)">
@isherwood That should be all added in now.
You have an
<hr>as a direct child of the grid, it’s taking up the “empty” cell.Thanks. The Tidy button is your friend, and good formatting is critical. By using them you can see that you have markup issues–extra closing div tags in several places. This could be your problem.
Horizontal rules can usually be replaced with border or pseudo-elements. I’d try that.
just change your CSS
grid-template-columns: repeat(2, 1fr);for preventing overlappingShow 1 more comment