html - 正文背景超出了 html div

Question

我有一个图像 slider ，我正在测试以将其应用到我的投资组合中。我将包含的 div(旋转木马)设置为 100% 宽度。但是，我仍然在 div 右侧看到大约 200 像素的主体背景颜色，这也导致出现水平滚动条。当我尝试检查页面上的元素时，我看到 html div 作为旋转木马的宽度，但设置为正文的背景颜色由于某种原因超出了该宽度。

我试过更改位置和边距，但无法弄清楚我忽略了什么。这是大元素和页面的 css http://marjib.com/test/test1.html

有人请帮忙:)

---

body { 
margin:0 auto;
background-color: #333;
}

.carousel {
margin:0;
width:100%;
height:630px;
background-color:#EEE;
position:absolute;
}

.slides {
padding: 0px;
width: 850px;
height: 630px;
margin: 20px auto;
position:relative;

}

.slides * {
user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
}

.slides input { display: none; }

.slide-container { display: block; }

.slide {
top: 0;
opacity: 0;
width: 850px;
height: 556px;
display: block;
position: absolute;

transform: scale(0);

 transition: all .7s ease-in-out;
}

.slide img {
width: 100%;
height: 100%;
}

Answer 1

.nav-dots 上的 width:100% 删除它应该没问题。它占用了加载时文档的宽度，但是当您将它从左侧绝对定位到固定量时，它会将它推过正文宽度，从而导致额外的间距。