html - 内容/页脚的宽度小于浏览器宽度

Question

相关页面位于 www.codykrauskopf.com/circus

如果您查看我页面的右侧，在半透明容器和浏览器窗口边缘之间有一个间隙。我看了看，出于某种原因，wrap、main、content 和 footer 都停止了。我已经将 html、body、main、content、wrap 和 footer 的宽度全部设置为 100%，但没有成功。

html, body {height: 100%;
width:100%;
margin:0;
padding:0;
overflow:auto;
}

#wrap {
width:100%;}
/* Circus.html content*/
#circusContent{
margin-left:100px;

}

p{
font-family:georgia;
}

div.topButtons{
display:inline-block;
margin-top:15px;
line-height:50px;
text-align:center;
vertical-align:middle;
width:130px;
background: rgb(166, 166, 166); /* The Fallback */
background: rgba(166, 166, 166, .5); 
}
#leftTopButton{
margin-left:75px;
}
a.forms{
text-decoration:underline;
}

div.topButtons:hover{
background: rgb(100, 0, 0); /* The Fallback */
background: rgba(0, 0, 0, 1); 
}

#circusParagraph{

color:white;
font-size:14px;
text-align:center;
margin-left:125px;
margin-top:25px;
}

#content{
position:relative;

margin-left:22.513089005%;

margin-bottom:-35px;
width:77.486910998%;

background: rgb(0, 0, 0); /* The Fallback */
background: rgba(0, 0, 0, 0.5); 
}

#main,
#wrap,
#content,
#circusContent{
height:100%;

}

Answer 1

你的罪魁祸首是:

#foottext {
  position: relative;
  left: 20px;
  top: 5px;
}

left: 20px 迫使 div 延伸到其容器之外，这导致了间隙。

与其使用 position: relative 移动或重新排列页面上的大型元素，不如应用 padding 或 margin 获得更好的结果。