添加一些内容时，顶层菜单会向下移动

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

试试这个。