CSS Layout Issue - Content Overlaps a Fixed Header

Hey guys,

So I've finally got around to start building my web design company's web site and I have come across a rather annoying problem that I just can't figure out.

I have a fixed header that contains a logo and nav links as well as a call to action (.hero) area that features a heading level 2, some text and a button.

All looks good until a user scrolls down and the content within the call to action area overlaps the page-header which is not obviously what I'm looking for.

Here is the styles I am using for both the .page-header, .nav & .hero

.header-logo,
.header-logo:hover {
    width: 200px;
    height: 45px;
    float: left;
    text-indent: -9999px;
    -webkit-transition: .09s;
    -moz-transition: .09s;
    transition: .09s;
}

.nav {
    float: right;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 10px;
}

.hero {
    background: url('../img/hero-photo.jpg') no-repeat bottom fixed;
    color: #fff;
    height: 550px;
    padding-top: 250px;
}

.hero h2 {
    font-family: 'Raleway-Extrabold', sans-serif;
    letter-spacing: -1.8px;
    line-height: 1.5;
    color: #fd4339;
}

If I am making no sense you can see the site and simply scroll down.

Any advice on how I can fix this would be greatly appreciated.

Thanking you in advance,

Stu : )