アンカーリンクを使用したナビゲーションは機能しません

Question

3つのナビゲーションオプションがあります。私がそれらをクリックすると、私は自分のページをこのアイテムにスクロールさせたい。私はチュートリアルで好きでした。 上記のアンカーリンクを作成し、移動するセクションと名付けました。 しかし、私がアンカーをクリックしたとき、私のnavはちょっと上に行きました。 クリックしたすべてのリンクでそのようなことが起こりました。助けて！！

Navs: 

     <div class="bar" id="about"><a href="#about"><b>About</b></a></div> 
     <div class="bar" id="skills"><a href="#skills"><b>Skills</b></a></div> 
     <div class="bar" id="contacts"><a href="#contacts"><b>Contacts</b></a></div> 

    Sections: 

     <h3 class="about_head"><a id="about">Some facts about me</a></h3> 
     <h3 class="skills_head"><a id="skills">Langugages and Tools i'm familiar with</a></h3> 
     <h3 class="postcard_head"><a id="contacts">Leave your feedback</a></h3>       

Answer 1

すべてdivタグからIDを削除し、それが

<div class="bar"><a href="#about"><b>About</b></a></div> 
<div class="bar"><a href="#skills"><b>Skills</b></a></div> 
<div class="bar"><a href="#contacts"><b>Contacts</b></a></div> 

<div class="bar" id="about"><a href="#about"><b>About</b></a></div> 
<div class="bar" id="skills"><a href="#skills"><b>Skills</b></a></div> 
<div class="bar" id="contacts"><a href="#contacts"><b>Contacts</b></a></div>