Проблема со стрелками ползунка

Question

У меня много проблем со стрелками-ползунками, так как я слежу за учебником на YouTube. Вместо того, чтобы идти рядом с изображением и характеристикой, он идет вверху. Сначала так не было, но потом у меня возникла проблема с планером. js, поэтому я переписал код, а потом появилась ошибка

HTML Код

    <section class="testimonials-section">
      <div class="wrapper">
        <h2>Testimonials</h2>

        <div class="testimonials container">
          <div class="testimonials">
            <div class="testimonial">
              <div class="slide-container">
                <div class="content">
                  <p>
                    Lorem ipsum dolor sit, amet consectetur adipisicing elit. 
                    Fuga, dolorem? Soluta aperiam maxime nam ducimus ab fuga. 
                    Libero, consequatur placeat! Explicabo aut labore enim? Tenetur, esse a. 
                    Quidem, deleniti provident.
                  </p>
                  <div class="name">
                    <strong>Darlene Richards,</strong> Amazon
                  </div>
                </div>

                <img src="images/testimonial1.png" alt="">
              </div>
            </div>

            <div class="testimonial">
              <div class="slide-container">
                <div class="content">
                  <p>
                    Lorem ipsum dolor sit, amet consectetur adipisicing elit. 
                    Fuga, dolorem? Soluta aperiam maxime nam ducimus ab fuga. 
                    Libero, consequatur placeat! Explicabo aut labore enim? Tenetur, esse a. 
                    Quidem, deleniti provident.
                  </p>
                  <div class="name">
                    <strong>Peter Williams,</strong> Louis Vuitton
                  </div>
                </div>

                <img src="images/testimonial3.png" alt="">
              </div>
            </div>

            <div class="testimonial">
              <div class="slide-container">
                <div class="content">
                  <p>
                    Lorem ipsum dolor sit, amet consectetur adipisicing elit. 
                    Fuga, dolorem? Soluta aperiam maxime nam ducimus ab fuga. 
                    Libero, consequatur placeat! Explicabo aut labore enim? Tenetur, esse a. 
                    Quidem, deleniti provident.
                  </p>
                  <div class="name">
                    <strong>Tara Green,</strong> Ferrari
                  </div>
                </div>

                <img src="images/testimonial2.png" alt="">
              </div>
            </div>
          </div>

          <span class="slider-prev">
            <img src="images/left-arrow.svg" alt="">
          </span>

          <span class="slider-next">
            <img src="images/right-arrow.svg" alt="">
          </span>
        </div>
      </div>
    </section>

CSS Код

.slider-prev,
.slider-next {
    position: absolute;
    top: 68px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.06);
    border-radius: 50%;
    cursor: pointer;
}

.slider-next {
    right: 0;
}

Где стрелки ползунка должны go

Answer 1

Это связано с тем, как работает свойство css position подробнее

Попробуйте добавить эту строку и посмотрите, поможет ли это:

редактировать использовать .testimonials.container селектор не .testimonials

.testimonials.container  {
  position: relative;
}