Галерея изображений HTML и CSS ⇐ Html

[Anonymous]

Заранее извиняюсь за HTML и CSS.
Я пытаюсь добавить галерею изображений на одну из моих HTML-страниц, как показано в коде ниже:

Код: Выделить всё

* {
margin: 0;
padding: 0;
}
body {
font-family: 'Poppins', sans-serif;
}
.wrapper {
width: 1170px;
margin: auto;
}
header {
background: url('images/clarebg.jpg');;
height: 100vh;
-webkit-background-size: cover;
background-size: cover;
background-position: center center;
position: relative;
}
.nav-area {
float: right;
list-style: none;
margin-top: 30px;
}
.nav-area li {
display: inline-block;
}
.nav-area li a {
color: #fff;
text-decoration: none;
padding: 5px 20px;
font-family: poppins;
font-size: 16px;
text-transform: uppercase;
}
.nav-area li a:hover {
background: #fff;
color: #333;
}

.gallery-container {
display: flex;
justify-content: center;  /* Centers content horizontally */
align-items: center;      /* Centers content vertically */
min-height: 100vh;         /* Makes the container fill the whole viewport height */
padding-top: 500px;         /* Adds some space from the top of the page */
}

.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
padding: 20px;
width: 90%;  /* Optional: controls the width of the gallery */
max-width: 1200px; /* Optional: maximum width */
}

.gallery-item img {
width: 100%;
height: auto;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
transition: transform 0.3s ease-in-out;
}

.gallery-item img:hover {
transform: scale(1.05);
}

Код: Выделить всё

Anniversary Homepage
[*]






[list]
[url=index.html]Home[/url]
[*][url=salou.html]Salou[/url]
[*][url=summer24.html]Summer 24[/url]
[*][url=every.html]Everything Else[/url]
[*][url=#]Contact[/url]
[/list]




[img]images/clarebg.jpg[/img]

[img]images/clarebg.jpg[/img]

[img]images/clarebg.jpg[/img]



[img]images/clarebg.jpg[/img]



[img]images/clarebg.jpg[/img]

Однако, похоже, он не играет в мяч. Я пытаюсь отцентрировать изображения и иметь возможность добавить больше, но у меня это очень сложно.
Я понимаю, что это, вероятно, основная проблема, но буду признателен за любую помощь, спасибо!

Подробнее здесь: https://stackoverflow.com/questions/795 ... ge-gallery