HTML Get the slider closer to the edge

Question

I installed a slider at my banner and use this html code:

<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>    

This is the css code:

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;
}

Now, the banner/slider looks like this:

How can I get the margin to the left and right border smaller? How can I get the points closer to the image?

Unfortunately, playing with my existing padding and margin do not help.

Thank you for your help.

Answer 1

It doesn't seem like the CSS is complete, as when I've pasted code you've provided I got this:

(red is replacement for the images I don't have)

Note how links < and > and the title are placed underneath the image, and not on it like in your example.

Nevertheless, I can see that there is a space between the chevrons (< and >) and that is a result of a <br/> tag, that you can remove. If I do that, and also remove text and chevrons to better match your image, I get this:

You can see that the dots touch the image.