My portfolio site's project section is responsive on smaller screens, but on larger screens there is extra space to the right. I have tried removing margins but the issue persists. How can I center the container and fix this problem?
Check out the problem in my dev tools here
#projects {
text-align: center;
}
#projects .grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 10px;
}
#projects .grid .container {
text-align: center;
}
#projects .container {
margin: 0;
position: relative;
}
#projects .container .box {
position: relative;
margin: 40px auto;
width: 250px;
height: 120px;
overflow: hidden;
background:red;
transition: 0.5s;
}
#projects .container .box:hover {
z-index: 1;
transform: scale(1.25);
box-shadow: 0 25px 40px rgba(0, 0, 0, 0.5);
}
#projects .container .box .imgbx {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#projects .container .box .imgbx:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background: linear-gradient(180deg, #1a75ff, #000);
mix-blend-mode: multiply;
opacity: 0;
transition: 0.5s;
}
#projects .container .box:hover .imgbx:before {
opacity: 1;
}
#projects .container .box .imgbx img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
#projects .container .box .box-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
display: flex;
padding: 10px;
align-items: flex-end;
}
#projects .container .box .box-content h3 {
color: #fff;
transition: 0.5s;
text-transform: uppercase;
margin-bottom: 2px;
font-size: 14px;
transform: translateY(200px);
}
#projects .container .box:hover .box-content h3 {
transform: translateY(0);
transition-delay: 0.6s;
}
#projects .container .box .box-content p {
color: #fff;
transform: translateY(200px);
transition: 0.5s;
font-size: 10px;
}
#projects .container .box:hover .box-content p {
transform: translateY(0);
transition-delay: 0.7s;
}
<section id="projects">
<h2 class="content-title">Recent Work</h2>
<div class="grid container">
<div class="box">
<div class="imgBx">
<img class="projectImg" src="project-images/gadue.png" id="img1" alt="">
</div>
<div class="box-content">
<div>
<h3>Gadue</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cupiditate, blanditiis?</p>
</div>
</div>
</div>
<div class="box">
<div class="imgBx">
<img class="projectImg" src="project-images/myherohome.png" id="img2" alt="">
</div>
<div class="box-content">
<div>
<h3>My Hero Wiki</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, natus.</p>
</div>
</div>
</div>
<div class="box">
<div class="imgBx">
<img src="project-images/stockapphome.png" alt="">
</div>
<div class="box-content">
<div>
<h3>TheStockApp</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, aspernatur.</p>
</div>
</div>
</div>
<div class="box">
<div class="imgBx">
<img class="projectImg" src="project-images/blackjack.png" id="img4" alt="">
</div>
<div class="box-content">
<div>
<h3>blackjack game</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iste, fuga.</p>
</div>
</div>
</div>
</div>
</section>