如何将幻灯片中的图像制作为全宽？

Question

I have this website: https://acanhs.org I want the slide show at the beginning to be at full width on all devices. What can I add to make that happen?

My html:

    <div class="w3-content w3-section responsive">

        <div class="mySlides w3-animate-top responsive" style="--background-image: url('homepagepictures/81463156_472179973704673_8295529433598935850_n(1).jpg')" >
        </div>

        <div class="mySlides w3-animate-bottom responsive" style="--background-image: url('homepagepictures/097f1e08-ebfe-434a-bc68-8020d02cee6e.JPG')">
        </div>

        <div class="mySlides w3-animate-top responsive" style="--background-image: url('homepagepictures/8291878a-b5ad-4003-8cc6-de7baafd84a0.JPG')">
        </div>
        
        <div class="mySlides w3-animate-bottom responsive" style="--background-image: url('homepagepictures/27890996_211176766129569_6923967286697000960_n.jpg')">
        </div>
        
        <div class="mySlides w3-animate-top responsive" style="--background-image: url('homepagepictures/42914143_364663130939605_1259772328364992140_n.jpg')">
        </div>

        <div class="mySlides w3-animate-bottom responsive" style="--background-image: url('homepagepictures/42947322_373232869884042_7326776160519321694_n.jpg')">
        </div>

        <div class="mySlides w3-animate-top responsive" style="--background-image: url('homepagepictures/44689929_944494762409958_8911408401400786089_n.jpg')">
        </div>

        <div class="mySlides w3-animate-bottom responsive" style="--background-image: url('homepagepictures/fd2b6c09-19b7-42ad-b7fb-bce6dc983690.JPG')">
        </div>

        <div class="mySlides w3-animate-top responsive" style="--background-image: url('homepagepictures/IMG_6922.jpg')">
        </div>

        <div class="mySlides w3-animate-bottom responsive" style="--background-image: url('homepagepictures/IMG_6932.jpg')" >
        </div>


    </div>

My javascript:

var myIndex = 0;
carousel();

function carousel() {
  var i;
  var x = document.getElementsByClassName("mySlides");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";  
  }
  myIndex++;
  if (myIndex > x.length) {myIndex = 1}    
  x[myIndex-1].style.display = "block";  
  setTimeout(carousel, 5000);    
}

I have tried a lot of stuff but I'm new to web development so it's most likely a mistake on my end.

Answer 1

You need to add this css to your element: <div class="w3-content w3-section responsive">

margin-left: 0px;
margin-right: 0px;
width: 100%;
max-width: unset;

This is to get rid of the left and right margin, then to make the div full-width. As for the max-width , I saw that you had it set on 980px , so you need to set it on unset .