Почему появляется скрол при позиционировании?

Question

[corasao]

Всем привет!

Подскажите, пожалуйста, почему появляется скрол при позиционировании декоративных эелементов?
https://monosnap.com/file/X29sqIeDETeGNOGwbWyyuS35...

<div class="about__inner">
          <img class="about__decor" src="images/decor/about-left.svg" alt="">
          <img class="about__decor" src="images/decor/about-top.svg" alt="">
          <img class="about__decor" src="images/decor/about-right.svg" alt="">
          <img class="about__decor" src="images/decor/about-center.svg" alt="">
          <h2 class="about__title big-title">Lorem ip</h2>
          <p class="about__text">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga in facere modi. Odit aut, qui eaque, nam, impedit cumque consequuntur deserunt laborum autem incidunt soluta dolores dolorum voluptatum dolorem vel!
            предоставляемых услуг.
          </p>
        </div>

.about__inner {
  padding: 120px 0;
  text-align: center;
  position: relative;
}
.about__decor {
  position: absolute;
  z-index: -1;
}
.about__decor:nth-child(1) {
  left: -60px;
  top: 50%;
  transform: translateY(-50%);
}
.about__decor:nth-child(2) {
  top: -140px;
  left: 50%;
  transform: translateX(-100%);
}
.about__decor:nth-child(3) {
  right: -60px;
  top: 50%;
  transform: translateY(-50%);
}

Скрол появляется только когда задаю 3-му элементу right: -60px;
Для первых двух скрола нет. Подскажите, пожалуйста, в чем может быть проблема?

Comments

[Ankhena]

Действительно, откуда может быть скролл, если вы сказали элементу выползти на 60 пикселей за него?

Ваши эти формочки это вообще не контентные изображения, а украшения. Ставьте их фонами и не будет ни дурацких абсолютов ни лишнего скролла.

Answer 1

[blablacarer]

overflow:hidden

а лучше все картинки через bg и псевдоэлементы