为什么右侧有空白？

Question

我目前正在设计我的婚礼网站，但我遇到了一个我正在努力的错误。我只使用HTML和CSS。这个想法是在滚动和固定背景之间交替进行，并且它的工作方式非常出色。我为自己感到骄傲。我已经复制下面的CSS。 （我清理了，这是一个有点混乱，当我复制和粘贴。）

http://mattvwhittle.com/WeddingWebsite/index.html

的问题是：有是在右边的空白块，如果你滚动的方式。

有什么建议吗？

* { 
    margin: 0; 
    padding: 0; 
} 
body, html, main { 
    height: 100%; 
    width: 100%; 
} 
.fixed-bg { 
    min-height: 100%; 
    background-size: cover; 
    background-attachment: fixed; 
    background-repeat: no-repeat; 
    background-position: center center; 
} 
#bg-fixed-1 { 
    background-image: url("images/skyline.jpg"); 
} 
#bg-fixed-1 h1 { 
    position: relative; 
    top: 130px; 
    left: 80px; 
} 
#bg-fixed-1 h2 { 
    position: relative; 
    top: 130px; 
    left: 140px; 
} 
#bg-scroll-2 { 
    background-color: #FCFBF7; 
} 
#bg-fixed-3 { 
    background-image: url("images/bandw.jpg"); 
} 
#bg-scroll-4 { 
    background-color: #FCFBF7; 
} 
#bg-fixed-5 { 
    background-image: url("images/cover.jpg"); 
} 
#bg-scroll-6 { 
    background-color: #FCFBF7; 
} 
.scrolling-bg { 
    min-height: 100%; 
} 

Answer 1

您的h1和h2s正在造成这种情况。如果你检查他们，你会看到他们推出了页面。

几个选项。我会用left-padding或者display display来替换left：inline。

#bg-fixed-1 h1 { 
    position: relative; 
    top: 130px; 
    padding-left: 80px; 
} 

#bg-fixed-1 h2 { 
    position: relative; 
    top: 130px; 
    padding-left: 140px; 
}