正文背景超出 html div

Question

我正在测试一个图像滑块，以在我的投资组合中实施。我将包含的 div（轮播）设置为 100% 宽度。但是，我仍然在 div 的右侧看到大约 200px 的主体背景颜色，这也导致出现水平滚动条。当我尝试检查页面上的元素时，我将 html div 视为轮播的宽度，但设置为 body 的背景颜色由于某种原因超出了此范围。

我已尝试更改定位和边距，但无法弄清楚我忽略了什么。这是大元素的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% 删除它应该没问题。它在加载时占用文档的宽度，但是当您将其从左侧绝对定位到固定量时，它会将其推过正文宽度，从而导致额外的间距。

Answer 2

更改您的 .nav-dots CSS

.nav-dots {
    display: block;
    height: 11px;
    left: 360px;
    position: absolute;
    top: 580px;
}