Как уменьшить слайдер, чтобы вокруг него было пространство ⇐ CSS

[Anonymous]

Я пытаюсь оставить немного пустого пространства вокруг этого слайдера, который я сделал для веб-сайта предприятия по выращиванию медицинской марихуаны.
Я не могу сказать, невозможно ли то, о чем я прошу, из-за того, как я настроил этот слайдер, или я просто не использую правильную команду на рисунке или слайдере. Или, возможно, я могу поместить все это в контейнер/div и таким образом уменьшить его. Любой совет будет оценен по достоинству. Ниже сначала мой HTML, а затем CSS.

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

* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

html, body { /* To ensure the background is black across all browsers and scenarios, you can target both html and body and also remove default margins/paddings.*/
margin: 0;
padding: 0;
background-color: black; /* or #000000 */
min-height: 100vh; /* Ensures the background covers the full viewport height */
}

body {
font-family: 'Lobster';
font-size: 23px;
line-height: 1.5;
}

a {
text-decoration: none;
color: #fff; /* is this white going to be a problem child that conflicts with the aesthetic? */

}

ul {
list-style: none;
margin-top: 30px;

}

img {
max-width: 100%;
display: block;
margin: 0 auto;
}

.logo {
width: 75%;
display: flex;
justify-content: center;
}

.main-menu ul {
display: flex;
gap: 30px;
}

/* Navbar */
.navbar {
padding: 20px;
}

.navbar .container {
display: flex;
justify-content: center;
flex-wrap: wrap;
}

/*-- CSS Image Slider --*/
#slider figure {
width: 500%;
margin: 0;
left: 0;
position: relative;
animation: 20s slider infinite;
}

#slider figure img {
width: 20%;
float: left;
}

#slider {
overflow: hidden;
}

@keyframes slider {
0% {
left: 0;
}
20% {
left: 0%;
}
25% {
left: -100%;
}
45% {
left: -100%;
}
50% {
left: -200%;
}
70% {
left: -200%;
}
75% {
left: -300%;
}
95% {
left: -300%;
}
100% {
left: -400%;
}
}

/* Utility Classes unsure if i need these just yet */

.container {
max-width: 1100px;
margin: 0 auto;
padding: 0 15px;
}

.container-sm {
max-width: 800px;
margin: 0 auto;
padding: 0 15px;
}

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

Reign Gardens Website
[*]








[url=index.html]
[img]images/Reign Gardens Logo White.PNG[/img]
[/url]

[list]

[url=index.html]Home[/url]

[*]
[url=#]Strains[/url]

[*]
[url=https://app.leaflink.com/menu/reign-gardens/]Order[/url]

[*]
[url=#]About Us[/url]

[/list]







[img]images/Slide1ReignGardens.JPG[/img]
[img]images/Slide2ReignGardens.JPG[/img]
[img]images/Slide3ReignGardens.JPG[/img]
[img]images/Slide4ReignGardens.JPG[/img]
[img]images/Slide1ReignGardens.JPG[/img]

ИЗОБРАЖЕНИЯ:
введите здесь описание изображения введите сюда описание изображения введите сюда описание изображения введите сюда описание изображения

Подробнее здесь: https://stackoverflow.com/questions/798 ... -around-it