Content hides behind header after used HTML anchor tag

I just have a little problem here that i cannot fix it.

I am doing an one page website, I have 3 links on my navig bar, as soon as I click in one of them it should scroll down to a especific div, and IT DOES. But now it goes behind the fixed header I set.

HTML

<div class="header1">
            .... blablabla...
</div>

        <div class="navigbox">
            <div class="navig">
                <a href="#intro">About</a>  
            </div>
        </div>

        <div id="intro">                
                some text
        </div>

CSS

.header1{
    height: 20%; width: 100%;
    position: fixed;
    z-index: 1;
    left:0;
    right:0;
    top: 0;
    margin-left:auto;
    margin-right:auto;}

.navigbox{
    background: white;
    position: fixed;
    z-index: 1;
    height: 10%; width: 80%;
    left: 10%;
    top: 20%;}  

.navig{
    height: 100%; width: 33.33%;
    float:letf;}    

#intro{
    background: white;
    height: 60%; width: 70%;
    left: 10%;
    top: 30%;
    position: absolute;
    padding: 5% 5% 0 5%;}

That's because the height of the header isn't considered when the page scrolls. Instead of applying the id to the div itself, put another element, say an a, before it and seperate the two with a couple br's.

Edit: This answer has a better way of doing it.