爲什麼右側有空白？

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; 
}