Why isn't my a tag leading to a desired id on the same page?

Here's my HTML which has the a tags:

<nav class="mdl-navigation mdl-layout--large-screen-only">
    <a class="mdl-navigation__link" href="#home">Home</a>
    <a class="mdl-navigation__link" href="#about">About</a>
    <a class="mdl-navigation__link" href="#contact">Contact</a>
</nav>

And here are the destinations:

<section id="home">
     <div class="content">
         <h1 class="heading">Welcome!</h1>
      </div>
</section> 

<section id="about">
     <div class="content">
         <h1 class="heading2">About me</h1>
     </div>
</section>

<section id="contact">
     <div class="content">
         <h1 class="heading">Contact me</h1>
     </div>
</section>

I'm using MDL library and heading , heading2 and content classes are for stylizing purposes only