寬度內容/頁腳停止短瀏覽器的寬度

Question

有問題的網頁位於www.codykrauskopf.com/circus

如果你看一下我的網頁的右側有半透明容器和瀏覽器的邊緣之間的間隙窗口。我看了看，由於某種原因，換行，主要內容和頁腳都停下來了。我將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移動或重新排列頁面上的大型元素，您可能會使用填充或邊距更好的結果。

Answer 2

取出

最大寬度：120em;爲你的主容器

這應該解決您的問題