Grid items wont center align despite using align and justify items - html

Question

I created a grid using 6 images and structured it the way how i want it. The only issue im having with my grid is that I cannot center it. It's leaning too far to the left and have a huge gap on the right. I tried using align items: Center and justify content: center but my grid does not move at all. If i were to use padding it will move but it does not translate well when i look at my project from a different device. What can i do to fix this issue? Thanks.
.PophikeMargin{
margin-top: 50px;
margin-bottom: 50px;
text-align: center;
}
.PophikeMargin h1{
margin: 30px;
}
.Hiking-grid-container{
display: grid;
grid-template-columns: repeat(9, 1fr);
grid-template-rows: repeat(4, 1fr);
grid-column-gap: 10px;
grid-row-gap: 10px;
justify-content: center
}
.Hiking-item1 {
grid-area: 1 / 1 / 3 / 2;
height: 400px;
width: 350px;
}
.Hiking-item2 {
grid-area: 3 / 1 / 5 / 2;
height: 400px;
width: 350px;
}
.Hiking-item3 {
grid-area: 1 / 2 / 6 / 4;
height: 800px;
width: 700px;
}
.Hiking-item4 {
grid-area: 1 / 4 / 3 / 6;
height: 400px;
width: 705px;
}
.Hiking-item5 {
grid-area: 3 / 4 / 5 / 5;
height: 400px;
width: 350px;
}
.Hiking-item6 {
grid-area: 3 / 5 / 5 / 6;
height: 400px;
width: 350px;
}
<section class="Popular-Hiking-Trails">
<div class="PophikeMargin">
<h1>Popular Hiking Destinations</h1>
<div class="Hiking-grid-container">
<div class="Hiking-item1">
<img src="Images/****" width="350" height="400">
</div>
<div class="Hiking-item2">
<img src="Images/****" width="350" height="400">
</div>
<div class="Hiking-item3">
<img src="Images/****" width="350" height="400">
</div>
<div class="Hiking-item4">
<img src="Images/****" width="350" height="400">
</div>
<div class="Hiking-item5">
<img src="Images/****" width="350" height="400">
</div>
<div class="Hiking-item6">
<img src="Images/****" width="350" height="400">
</div>
</div>
</div>
</section>

Answer 1

Several points in your code:
you defined a 9 cols and 4 rows grid
you position the item inside with their row-start, col-start, row-end, col-end but not with the good values. If you want to design grid with grid-area check here: http://cssgridbuilder.com/
if you want to center the element use ...-self for the element to center
Here a snippet with 2 cols, 2 rows and images inside with grid-area. If you need dynamic numbering of images, it's more an approach with span to take.
.PophikeMargin {
margin-top: 50px;
margin-bottom: 50px;
text-align: center;
}
.PophikeMargin h1 {
margin: 30px;
}
.Hiking-grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 10px;
}
.Hiking-item1 {
grid-area: 1 / 1 / 2 / 2;
}
.Hiking-item2 {
grid-area: 1 / 2 / 2 / 3;
}
.Hiking-item3 {
grid-area: 1 / 3 / 2 / 4;
}
.Hiking-item4 {
grid-area: 2 / 1 / 3 / 2;
}
.Hiking-item5 {
grid-area: 2 / 2 / 3 / 3;
}
.Hiking-item6 {
grid-area: 2 / 3 / 3 / 4;
}
.Hiking-grid-container>div {
height: auto;
width: 33%;
justify-self: center;
align-self: center;
}
<section class="Popular-Hiking-Trails">
<div class="PophikeMargin">
<h1>Popular Hiking Destinations</h1>
<div class="Hiking-grid-container">
<div class="Hiking-item1">
<img src="https://picsum.photos/id/237/350/400">
</div>
<div class="Hiking-item2">
<img src="https://picsum.photos/id/184/350/400">
</div>
<div class="Hiking-item3">
<img src="https://picsum.photos/id/125/350/400">
</div>
<div class="Hiking-item4">
<img src="https://picsum.photos/id/85/350/400">
</div>
<div class="Hiking-item5">
<img src="https://picsum.photos/id/51/350/400">
</div>
<div class="Hiking-item6">
<img src="https://picsum.photos/id/100/350/400">
</div>
</div>
</div>
</section>