Wie verkleinere ich meinen Schieberegler, damit um ihn herum Platz ist? ⇐ CSS

[Anonymous]

Vielen Dank im Voraus für jeden Rat, den Sie mir geben können!
Ich versuche, um diesen Schieberegler, den ich für die Website einer medizinischen Marihuana-Anbauanlage erstellt habe, etwas Leerraum zu lassen.
Ich kann nicht sagen, ob das, was ich verlange, aufgrund der Art und Weise, wie ich diesen Schieberegler eingerichtet habe, unmöglich ist oder ob ich einfach nicht den richtigen Befehl für die Abbildung oder den Schiebereglerteil verwende. Oder vielleicht kann ich das Ganze in einem Container/Div platzieren und es auf diese Weise etwas verkleinern. Jeder Rat wäre dankbar. Unten ist zuerst mein HTML und dann mein CSS.

Code: Select all

* {
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 [url=viewtopic.php?t=26065]problem[/url] 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;
}

Code: Select all

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]