HTML使滑块更靠近边缘

Question

我在横幅上安装了一个滑块，并使用此HTML代码：

<header>
    <section role="banner"> <!-- flexslider begins -->
        
            <div class="slideshow-container">

                <div class="mySlides fade">
                  <div class="numbertext">1 / 3</div>
                  <a href="Pflanzen_von_A-Z/Ananas/ananas.php"><img src="/img/css_slider_ananas.JPG" style="width:100%"></a>
                  <div class="text">Ananas</div>
                </div>

                <div class="mySlides fade">
                  <div class="numbertext">2 / 3</div>
                  <a href="Pflanzen_von_A-Z/Horngurke/horngurke.php"><img src="/img/css_slider_horngurke.JPG" style="width:100%"></a>
                  <div class="text">Horngurke</div>
                </div>

                <div class="mySlides fade">
                  <div class="numbertext">3 / 3</div>
                  <a href="Pflanzen_von_A-Z/Granatapfel/granatapfel.php"><img src="/img/css_slider_granatapfel.jpg" style="width:100%"></a>
                  <div class="text">Granatapfel</div>
                </div>

                <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
                <a class="next" onclick="plusSlides(1)">&#10095;</a>

            </div>
        <br>

        <div style="text-align:center">
          <span class="dot" onclick="currentSlide(1)"></span> 
          <span class="dot" onclick="currentSlide(2)"></span> 
          <span class="dot" onclick="currentSlide(3)"></span> 
        </div>

        <script>
        let slideIndex = 1;
        showSlides(slideIndex);

        function plusSlides(n) {
          showSlides(slideIndex += n);
        }

        function currentSlide(n) {
          showSlides(slideIndex = n);
        }

        function showSlides(n) {
          let i;
          let slides = document.getElementsByClassName("mySlides");
          let dots = document.getElementsByClassName("dot");
          if (n > slides.length) {slideIndex = 1}    
          if (n < 1) {slideIndex = slides.length}
          for (i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";  
          }
          for (i = 0; i < dots.length; i++) {
            dots[i].className = dots[i].className.replace(" active", "");
          }
          slides[slideIndex-1].style.display = "block";  
          dots[slideIndex-1].className += " active";
        }
        </script>
        
    </section> <!-- flexslider ends -->

</header>    

这是CSS代码：

header [role=banner] {
    grid-column: main-links / main-rechts;
    grid-row: 2/3;
    background: #a5e8a5 linear-gradient(-42deg, #a5e8a5, #7fb37f, #a5e8a5);
    padding: 1em 1em;/* oben und unten 1em */
                     /* links und rechts 1em */
    margin: 0 3em;
}

[role=banner] {
    position: relative;
}

[role=banner] h2,
[role=banner] .slide_slogan{
    text-align: center;
}

[role=banner] img {
    float: left;
    margin-right: 0.5em;
}

.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 3px; /* Abstand der Punkte unter sich */
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
  position: relative;
  bottom: 0em;
}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: relative;
  bottom: 1.7em;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 3px; /* Abstand der Punkte unter sich */
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
  position: relative;
  bottom: 0em;
}

.active, .dot:hover {
  background-color: #717171;
}

现在，横幅/滑块看起来像这样：

我如何才能使左和右边界的保证金较小？ 如何使要点更接近图像？

不幸的是，玩我现有的填充物和保证金无济于事。

感谢您的帮助。

Answer 1

看来CSS已经完成，就像当我粘贴代码时，我得到了：（

红色是我没有的图像的替代）

请注意链接＆lt;和＆gt;的链接如何放置在图像下方，而不是在示例中像示例一样。

不过，我可以看到雪佛兰（＆lt; and ＆gt; ）之间存在一个空间，这是＆lt; br/＆gt;的结果。标签，您可以删除。如果我这样做，还可以删除文本和雪版种以更好地匹配您的图像，我会得到：

您可以看到这些点触及了图像。