title: linking in page with margin-top doesn't work
body: <p>I'm building a website for my fathers company. I made a menubar which sticks to the top, but to make that work, I had to add a margin-top of 120px. That was no problem, so I did that.</p>
  
  <p>But if I click a link in that menubar, the tag I said it has to go to, goes to the top of the page. But you can't see it, because the menubar is before the text. For example, if I click the link "Neuraal Netwerk", I want to see the h2 "Ervaring is de beste leermeester" and not a part of the &lt;p&gt; tag....</p>
  
  <p>How can I solve this?</p>
  
  <p>Here is my JSFiddle: <a href="https://jsfiddle.net/7afvgbag/2/" rel="nofollow">https://jsfiddle.net/7afvgbag/2/</a></p>
  
  <p>Here is my HTML code:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;NeurOp&lt;/title&gt;
      &lt;link rel="stylesheet" type="text/css" href="../Stijlen/Index.css"&gt;
      &lt;link rel="stylesheet" type="text/css" href="../Stijlen/Algemeen.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;div class="navbar"&gt;
  
          &lt;h1&gt;NeurOp - Specialist in neurale oplossingen&lt;/h1&gt;
  
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#home"&gt;Home&lt;/a&gt;&lt;/li&gt; | 
              &lt;li&gt;&lt;a href="#neuraalNetwerk"&gt;Neuraal Netwerk&lt;/a&gt;&lt;/li&gt; | 
              &lt;li&gt;Toepassingen&lt;/li&gt; | 
              &lt;li&gt;&lt;a href="#overOns"&gt;Over ons&lt;/a&gt;&lt;/li&gt; 
          &lt;/ul&gt;
  
  
      &lt;/div&gt;
  
          &lt;div class="content"&gt;
  
              &lt;div class="home"&gt;
  
                  &lt;h2 id="home"&gt;Neurale netwerktechnologie bereikbaar voor ieder bedrijf!&lt;/h2&gt;
                  &lt;p&gt;Dat is ons doel en dat bereiken we door neurale netwerk technologie toe te passen op bestaande sets data. Bedrijven kunnen zo direct profiteren van de voordelen die deze krachtige technologie biedt. En omdat veel bedrijven hun data verzamelen in Excel, bieden wij de mogelijkheid onze technologie in Excel te gebruiken.&lt;/p&gt;
  
                  &lt;div class="lijnDun"&gt;&lt;/div&gt;
  
                  &lt;h2&gt;Wat doet een neuraal netwerk&lt;/h2&gt;
                  &lt;p&gt;Een neuraal netwerk is een zelf lerend computermodel. Het leert aan de hand van praktijkvoorbeelden, waar reguliere computermodellen worden gemaakt met behulp van business rules. Wil je een auto leren om zelf te rijden aan de hand van business rules, dan zal een oneindige set rules het gevolg zijn. Je kunt ook een zelf lerende computer laten &amp;#39;meerijden&amp;#39; met een goede chauffeur.&lt;/p&gt;
  
              &lt;/div&gt;
  
              &lt;div class="lijnDun"&gt;&lt;/div&gt;
  
              &lt;div class="neuraalNetwerk" id="neuraalNetwerk"&gt;
  
                  &lt;h2&gt;Ervaring is de beste leermeester&lt;/h2&gt;
                  &lt;p class="ervaringLeermeester"&gt;&lt;img src="../Media/pcHersenen.png" class="pcHersenen"&gt;&lt;p&gt;
                  &lt;p class="ervaringLeermeesterTekst"&gt;In het zenuwstelsel van een mens geven zenuwcellen via verbindingen signalen aan elkaar door. De sterkte van die signalen is gebaseerd op onze ervaring. Dus wanneer we bezig zijn met leren / oefenen, zijn we de verbindingen in ons brein aan het trainen. Door iets vaker te doen worden we er beter in. Iemand met heel veel ervaring, is een expert.&lt;br&gt;&lt;br&gt;Een neuraal netwerk werkt precies zo. Het is een computermodel dat is samengesteld uit neuronen en verbindingen daartussen. Aan de hand van voorbeelden met een bekende uitkomst worden de verbindingen sterker of zwakker gemaakt net zolang tot het netwerk de juiste antwoorden geeft. Daarna geeft het netwerk ook de juiste antwoorden in een nieuwe situatie. Predictive Analytics, Artificial Intelligence, Machine Learning en Deep Learning zijn slechts andere benamingen voor deze vorm van technologie. &lt;/p&gt;
                  &lt;h4&gt;&amp;#34;Een neuraal netwerk neemt het juiste besluit, iedere keer opnieuw.&amp;#34;&lt;/h4&gt;
  
              &lt;/div&gt;
  
              &lt;div class="lijnDik"&gt;&lt;/div&gt;
  
              &lt;div class="toepassingen"&gt;
                  &lt;h2&gt;Toepassingen&lt;/h2&gt;
                  &lt;h3&gt;Incasso: Dagvaarden om het proces of om te incasseren?&lt;/h3&gt;
                  &lt;p&gt;Alle inspanningen ten spijt, zijn er altijd debiteuren die hun factuur niet (kunnen) betalen. En naar genoeg lopen juist de kosten van de niet succesvolle incasso dossiers het hoogst op. &lt;br&gt;&lt;br&gt;
                  Hoe eerder in het incasso proces bekend is of de vordering betaald zal worden of niet (kan of wil de debiteur niet betalen), hoe effici&amp;#235;nter het proces hierop ingeregeld kan worden.  &lt;br&gt;&lt;br&gt;
  
                  Met name wanneer de kostbare keuze om al dan niet te dagvaarden gemaakt moet worden is de toegevoegde waarde van een goed advies van doorslaggevend belang. &lt;br&gt;&lt;br&gt;
  
                  Afgesloten dossiers vormen de voorbeelden waarmee het neurale netwerk getraind wordt. Voor lopende dossiers zijn we vervolgens in staat om ruim 25% van de kosten besparen.&lt;/p&gt;
  
                  &lt;div class="lijnDun"&gt;&lt;/div&gt;
  
                  &lt;h3&gt;Commercie: Jagen op kansloze missies, of focus op re&amp;#235;le kansen?&lt;/h3&gt;
                  &lt;p&gt;Waar in de markt moet ik zijn om zinvol te acquireren? Op welke aanbesteding kan ik beter niet inschrijven omdat we die niet gaan winnen? Aan welke prospect besteed ik op vrijdagmiddag mijn laatste tijd deze week? Het antwoord op dit soort vragen is de sleutel naar een efficiëntere verkoopafdeling. &lt;br&gt;&lt;br&gt;
  
                  En dat is concreet mogelijk met neurale netwerktechnologie! Zo zijn we bij voorbeeld in staat om de openstaande offertes van een bedrijf te onderverdelen in drie groepen:
                      &lt;ul class="commercie"&gt;
                          &lt;li&gt;Offertes waarvan 60% zal leiden tot een opdracht.&lt;/li&gt;
                          &lt;li&gt;Offertes waarvan 20% zal leiden tot een opdracht.&lt;/li&gt;
                          &lt;li&gt;Offertes waarvan 1% zal leiden tot een opdracht.&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/p&gt;
  
                  &lt;div class="lijnDun"&gt;&lt;/div&gt;
  
                  &lt;h3&gt;Logistiek: Blijft de klant thuis voor de bezorger, of niet?&lt;/h3&gt;
                  &lt;p&gt;Hoe laat de pakketbezorger een pakketje aan zal bieden is lastig te voorspellen. Dit is niet alleen afhankelijk van de chauffeur, maar bij voorbeeld ook van de weersomstandigheden en het aantal pakketten dat die dag uitgereden moet worden. We hebben &amp;#39;proof of concept&amp;#39; mogen leveren op het afgeven van een tijdvakindicatie voor de bezorging van een pakket. Met neurale netwerktechnologie zijn we in staat het aantal verkeerde voorspellingen met 2/3 terug te dringen.&lt;br&gt;&lt;br&gt;
  
                  Wanneer de voorspelde bezorgtijd betrouwbaar blijkt, zal de consument er meer waarde aan hechten. En er voor thuis blijven, waardoor de klanttevredenheid omhoog gaat evenals de &amp;#39;hitrate&amp;#39; in de bezorging.&lt;/p&gt;
  
                  &lt;div class="lijnDun"&gt;&lt;/div&gt;
  
                  &lt;h3&gt;Huurinning: De huurder uitzetten of het samen oplossen?&lt;/h3&gt;
                  &lt;p&gt;&amp;#39;Vroege signalering&amp;#39;, de branche heeft het er al jaren over en neurale netwerktechnologie maakt het mogelijk. Iedere maand opnieuw worden woningcorporaties geconfronteerd met huurders die niet (op tijd) betalen. Een klein deel hiervan belandt uiteindelijk in een uitzettingsprocedure. Wanneer bij de eerste uitblijvende betaling al duidelijk is hoe groot de kans is dat de huurder behoort bij die kleine probleemgroep, kan de opvolging hierop inspelen. Dat verhoogt de kans om samen met de huurder andere oplossingen te vinden. De  toegevoegde waarde is sociaal misschien nog wel groter dan financieel.&lt;/p&gt;
              &lt;/div&gt;
  
              &lt;div class="lijnDik"&gt;&lt;/div&gt;
  
              &lt;div class="overOns" id="overOns"&gt;
  
              &lt;h2&gt;Over ons&lt;/h2&gt;
  
              &lt;p class="pfTekst"&gt;Een succesvol neuraal netwerk realiseren is complex. Om van scratch af aan een neuraal netwerk te bouwen, is gedegen kennis van de neurale netwerk technologie en algoritmes noodzakelijk.  
  Analytisch vermogen en het goed begrijpen van de klantsituatie zijn essentieel om de juiste toepassingen binnen een organisatie te herkennen en de data bruikbaar in te zetten.&lt;br&gt;&lt;br&gt;
  
              Dat is ons specialisme. Daarbij wij zijn zo overtuigd van de effectiviteit van onze toepassingen, dat we werken volgens het &amp;#39;no cure no pay&amp;#39; principe. &lt;br&gt;&lt;br&gt;
  
              &lt;em&gt;&amp;#34;Resultaten uit het verleden zijn de basis voor de toekomst.&amp;#34;&lt;/em&gt;&lt;/p&gt;
  
              &lt;p class="pasfotoP"&gt;&lt;img src="../Media/pfk.jpg" class="pasfoto"&gt;&lt;/p&gt;
              &lt;p class="pasfotoP"&gt;&lt;img src="../Media/pfj.png" class="pasfoto pfJeroen"&gt;&lt;/p&gt;
              &lt;p class="afbeeldingTekst"&gt;&lt;em&gt;Koen Meeusen en Jeroen Blokdijk&lt;/em&gt;&lt;/p&gt;
  
              &lt;/div&gt;
  
          &lt;/div&gt;
  
              &lt;div class="footer"&gt;
  
                  &lt;p class="links"&gt;Neur&lt;em&gt;Op&lt;/em&gt; BV&lt;br&gt;
                  koen.meeusen@neurop.nl&lt;br&gt;
                  &lt;a href="tel:+31 651 808 628"&gt;+31 651 808 628&lt;/a&gt;&lt;/p&gt;
  
                  &lt;p class="rechts"&gt;KvK nummer: 64592154&lt;br&gt;
                  BTW nummer: 855734425B01&lt;br&gt;
                  IBAN: NL80 INGB 0007 1271 10&lt;br&gt;
                  &lt;a href="../Media/AlgemeneVoorwaarden.pdf" target="_blank"&gt;Algemene Voorwaarden&lt;/a&gt;&lt;/p&gt;
  
              &lt;/div&gt;
  
          &lt;!-- Algemene voorwaarden in PDF bestand downloaden in footer --&gt;
  
       &lt;/body&gt;
   &lt;/html&gt;
  </code></pre>
  
  <p>And here is my CSS code:</p>
  
  <pre><code>/************/
  /* MENUBALK */
  /************/
  .navbar {
  background-color: #60C8FF;
  width: 100%;
  height: 120px;
  border-bottom: 3px solid #36B9FF;
  position: fixed;
  top: -5px;
  }
  
  .navbar h1 {
  padding: 5px;
  border-bottom: none;
  text-align: center;
  }
  
  .navbar li {
  display: inline;
  width: 100%;
  }
  
   .navbar ul {
  text-align: center;
  width: 100%;
      position: fixed;
      top: 50px;
  }
  
  /**********/
  /* FOTO'S */
  /**********/
  
  .afbeeldingTekst {
  margin-top: 0px;
  }
  
  /********************/
  /* LIJN ONDER KOPJE */
  /********************/
  
  .lijnDik {
  border-top: solid 4px #36B9FF;
  }
  
  .lijnDun {
  border-top: solid 2px #36B9FF;
  }
  
  /***********/
  /* CONTENT */
  /***********/
  
  .content {
  width: 70%;
  margin: auto;
  }
  
  .home {
  margin-top: 120px;
  }
  
  .machineLearning {
  border-bottom: 2px solid #36B9FF;
  width: 100%;
  }
  
  .pcHersenen {
  width: auto;
  height: auto;
  max-width: 90px;
  margin-top: -16px;
  }
  
  .ervaringLeermeester {
  float: left;
  }
  
   .commercie {
  margin-top: -15px;
  margin-left: -20px;
  list-style-type: square;
  }
  
  .overOns {
  width: 100%;
  }
  
  .pasfoto {
  width: auto;
  height: 150px;
  border-radius: 30px;
  }
  
  .pasfotoP {
  display: inline-block;
  }
  
  .pfJeroen {
  margin-left: 30px;
  }
  
  /**********/
  /* FOOTER */
  /**********/
  
  
  .footer {
  background-color: #303030;
  color: #FFF;
  height: auto;
  display: inline-block;
  width: 100%
  }
  
  .footer p {
  display: inline-block;
  }
  
  .footer .links a {
  color: #FFF;
  text-decoration: none;
  pointer-events: none;
      cursor: text;
  }
  
  .footer .rechts a {
  color: #FFF;
  }
  
  .footer .rechts {
  float: right;
  margin-right: 10px;
  }
  
  .footer .links {
  float: left;
  margin-left: 10px;
  }
  </code></pre>