eellazy: нет айфона в доступной близости.
Если нет возможности посмотреть что в консоли, обычно поступаю так: по очереди задаю border, bg или outline разным блокам (кому что лучше подходит) - довольно быстро становится понятно, кто виноват.
По дороге исправьте ошибки в CSS вроде склеившихся правил цвета и стиля для border.
tripcollor: По умолчанию эти элементы имеют display:block, а значит занимают всю ширину родителя.
Если кто-то станет писать ширину для html, можно только пальцем у виска покрутить.
riper9819: Логичнее отметить ответ решением: и ответившему приятнее и остальным видно, что вопрос имеет решение. Можно отмечать решением несколько ответов.
.
Соответственно при переходе к якорю верхяя граница этого блока оказывается у верха окна браузера.
Визуально, этот блок практически слеплен с предыдущим, по крайней мере на большом экране.
Так что мешает добавить для него верхний padding равный высоте меню?
Второй вариант на JS:
Раз уж все равно есть скрипт плавной прокрутки от ScrollTop отнять эти 77точек меню (Или соответственно для разных размеров экрана. Можно прямо вс крипте спросить текущую высоту меню $(ваш_селектор).height() ).
