HTML/CSS image slider code stretching screen

Question

I Created this image carousel for this site but for some reason, the code is stretching the screen. If you can see in the image (the white bar on the left but for some reason, it's doing nothing to the right side).

HTML:

<section id="sliderM">
  <input type="radio" name="sliderM" id="s1M" checked>
  <input type="radio" name="sliderM" id="s2M">
  <input type="radio" name="sliderM" id="s3M">


  <label for="s1M" id="slide1M">📌 &nbsp;Beckenham</label>
  <label for="s2M" id="slide2M">💅 &nbsp;Petts Wood</label>
  <label for="s3M" id="slide3M">🚗 &nbsp;Free Parking</label>

</section>

CSS:

#sliderM {
  position: relative;
  width: 50%;
  height: 30vw;
  margin: 80px auto;
  font-family: 'Helvetica Neue', sans-serif;
  perspective: 1400px;
  transform-style: preserve-3d;
}

input[type=radio] {
  position: relative;
  top: 108%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: 0 15px 0 0;
  transform: translateX(-83px);
  cursor: pointer;
  opacity: 0;
}


input[type=radio]:nth-child(5) {
  margin-right: 0px;
  opacity: 0;  
}

input[type=radio]:checked {
    opacity: 0;
}

#sliderM label {
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
  text-shadow: 2px 2px rgba(0, 0, 0, 0.21);
  font-size: 25px;
  top: 0;
  color: white;
  padding: 30px;
  font-weight: bold;
  border-radius: 25px;
  cursor: pointer;
  vertical-align: text-top;
  display: flex;
  transition: transform 400ms ease;
}

#slide1M {
  background-image: url("http://hair-2022.coppah.dev/wp-content/uploads/2022/02/AdobeStock_294488469-scaled.jpeg");
  background-size: 100%;
}

#slide2M {
  background-image: url("http://hair-2022.coppah.dev/wp-content/uploads/2022/02/AdobeStock_332887661-2-scaled.jpeg");
  background-size: 100%;
}

#slide3M {
  background-image: url("http://hair-2022.coppah.dev/wp-content/uploads/2022/02/AdobeStock_264577335-1-scaled.jpeg");
  background-size: 100%;
}


/* Slider Functionality */

/* Active Slide */
#s1M:checked ~ #slide1M, #s2M:checked ~ #slide2M, #s3M:checked ~ #slide3M {
  box-shadow: 0 13px 26px rgba(0,0,0, 0.3), 0 12px 6px rgba(0,0,0, 0.2);
  transform: translate3d(0%, 0, 0px);
}

/* Next Slide */
#s1M:checked ~ #slide2M, #s2M:checked ~ #slide3M, #s3M:checked ~ #slide1M {
  box-shadow: 0 6px 10px rgba(0,0,0, 0.3), 0 2px 2px rgba(0,0,0, 0.2);
  transform: translate3d(115%, 0, -250px);
}


/* Next to Next Slide */
#s1M:checked ~ #slide3M, #s2M:checked ~ #slide4M, #s3M:checked ~ #slide1M{
  box-shadow: 0 1px 4px rgba(0,0,0, 0.4);
  transform: translate3d(115%, 0, -250px);
}

/* Previous to Previous Slide */
#s1M:checked ~ #slide3M, #s2M:checked ~ #slide1M, #s3M:checked ~ #slide2M {
  box-shadow: 0 1px 4px rgba(0,0,0, 0.4);
  transform: translate3d(-115%, 0, -250px);
}

/* Previous Slide */
#s1M:checked ~ #slide5M, #s2M:checked ~ #slide1M, #s3M:checked ~ #slide2M {
  box-shadow: 0 6px 10px rgba(0,0,0, 0.3), 0 2px 2px rgba(0,0,0, 0.2);
  transform: translate3d(-115%, 0, -250px);
}

I am also using Elementor Pro and inserted things using the HTML widget. Hopefully, someone can help, would be really appreciated!

Here's the website this is happening to: https://hair-2022.coppah.dev/locations

I've searched up a solution and it mentions that it could because from padding and margin but I don't know how else to center the entire slider.

Answer 1

Just put the width in #sliderM smaller, like 30%. Look:

#sliderM {
  position: relative;
  width: 30%;
  height: 30vw;
  margin: 80px auto;
  font-family: 'Helvetica Neue', sans-serif;
  perspective: 1400px;
  transform-style: preserve-3d;
}

#slide1M {
  background-image: url("http://hair-2022.coppah.dev/wp-content/uploads/2022/02/AdobeStock_294488469-scaled.jpeg");
  background-cover: cover; //or change to another dimensions
  background-repeat: no-repeat;
}

But is not just the image slider causing that, all of the others elements are big, i recomend you try to decrease the dimensions.

Link for the elementor: Elmentor selection overview