Anchor Links Going To Wrong Position

Hello

I am revamping my portfolio - http://iwillbeawebdeveloper.co.uk, however on Firefox and IE, the menu anchor links go to the wrong position and cut off a good chunk of the h1 tag.

It did happen on Chrome too, which is what I work and test on, and I fixed it with the following CSS:

.anchor {
    position: relative;
    border-top: -20px solid transparent;
    margin: -30px 0 0;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
}


.anchor:before {
    content: "";
    position: absolute;
    top: -110px;
    left: 0;
    right: 0;
}

Edited December 11, 20169 yr by James Winfield