is there a way to re-design my onepager without having to fine tune the margins?

You can add a class to all these anchors which adds a pseudo-element to them having the following settings:

.your_anchor_class::before { 
  display: block; 
  content: " "; 
  margin-top: -80px; 
  height: 80px; 
  visibility: hidden; 
  pointer-events: none;
}

The 80px and -80px values will have to be adjusted according to the height of your fixed header, but this will create pseudo elements which are as high as the header and will then be behind then header, aligning their according “main” elements under the header.

ADDITION/EDIT after seeing your Fiddle (edited one more time after comment):

I didn’t know before that you don’t “jump” to the anchor positions directly, but there’s an animated scrolling script which scrolls to those anchors, which has to be handled differently, i.e. by changing the script.

So I only changed one little thing in your Javascript (at the bottom of the HTML code): I added ” – 80 ” to the animate function, which adds (or rather subtracts) an offset of 80px to the position which the script animation scrolls. (only exception: if the link anchor is #home, there is no offset, since in this case the page has to scroll up all the way, that’s what the if/else is for):

<!-- Smooth Scroll -->
<script>
  $('a').click(function() {
  var scrollziel = $(this).attr('href');
    if(scrollziel == '#home') {
      $('html, body').animate({
        scrollTop: 0
      }, 500);
      return false;
    } else {
      $('html, body').animate({
        scrollTop: $($(this).attr('href')).offset().top - 80
      }, 500);
      return false;
    }
  });
</script>
<!-- Smooth Scroll Ende -->

This seems to fix it, see my version of your fiddle, with only that one little difference: https://jsfiddle.net/c1gjybtf/