Как исправить проблему с якорной ссылкой

У меня есть вопрос относительно тега привязки.

У меня есть страница как

<div id='header'>
    bunch of stuff….and iamges
</div>

<div>
   <a href='#test1>test1</a>
   <a href='#test2>test2</a>
   <a href='#test3>test3</a>
</div>

<div class='content'>
   <a name='test1'>test1 project</a>
   bunch of stuff

   <a name='test2'>test1 project</a>
   bunch of stuff

   <a name='test3'>test1 project</a>
   bunch of stuff
</div>

Мой css

#header{
  position: fixed;
  right: 0;
  left: 0; 
  z-index: 1030;
  margin-bottom: 0
 height:150px;
}

Однако, похоже, что каждый раз, когда я нажимаю ссылку test1 на test3, мой div 'content' перемещается в верхнюю часть моего div заголовка. так что мой div 'content' покрывается моим div заголовка (150px). Есть ли в любом случае, чтобы исправить мою проблему? Большое спасибо!

Ответы на вопрос(4)

Ваш ответ на вопрос