容器在HTML之外溢出

Question

我试图找出容器右侧的额外间距来自哪里，我似乎无法使用检查器找到超出HTML标签的元素。

Live Preview

任何帮助表示赞赏，

提前致谢！

Answer 1

它来自这个班级

slider-title tk-futura-pt-bold

而不是使用位置并留在上面的类。

使用以下命令重新定位div（滑块）：

left: 10%;
top: 10%;
transform: translate(10%,10%);

Answer 2

我会将slider-box设置为position: relative;并将slider-title设置为position: absolute;这将解决您的问题。

Answer 3

在你的CSS末尾写下这段代码，你就会解决问题:)

.slider-description[_ngcontent-c3], .slider-title[_ngcontent-c3] {
  width: calc(100% - 10%);
}

Answer 4

而不是左：10％;使用padding-left：10％;在.slider-title tk-futura-pt-bold class

Answer 5

具有类slider-description和slider-title的元素添加了css样式。

您可以使用以下方法解决此问题：

#slider{
    .slider-box {
        position: absolute;
        left: 10%;
        top: 170px;
    }

    .slider-description, .slider-title{
        color: #fff;
    }

    .slider-title {
        font-size: 24px;
    }

    .slider-description{
        width: 500px;
    }
}