頂部菜單向下移動時增加一些內容

Question

我有以下代碼

https://jsfiddle.net/c1kumo0y/

頂部的菜單被移動了一下，滾動當英雄的內容是可見的最頂部，當以下行被刪除：

<p id="firstLine">Projeniz mi var? Biz Yapalım</p></br> 
<p id="secondLine">Projelerinizi en uygun fiyatlar la sizin yerinize Biz Yapalım</p> 

頂部菜單變成正常，有什麼可能導致這種情況？任何幫助？

Answer 1

這是餘量摺疊的效果： http://www.howtocreate.co.uk/tutorials/css/margincollapsing

緣塌陷發生無論兩個（或多個）的頂部或底部邊緣是接觸。基本的想法是，當他們碰觸時，而不是獲得兩個邊距的總和，使用較大的一個，而忽略另一個。

有很多可能的方法來解決您的問題。例如，您可以添加1px填充以分割頁邊距：

#container { 
    padding-top: 1px; 
} 

或者您可以插入一些內容。或者，也許可以找到更適合您需求的其他方式。

Answer 2

.fixedWidth { 
    margin: 0 auto; 
    max-width: 1100px; 
} 

試試這個。