It looks like it’s working fine, but the reason it looks like that is because your Header (logo/menu) is in a fixed position when scrolling down. Since it is in a fixed position it shows up on top of the area you’re talking about.
If you want to keep the Header as it is, then you can add more margin-top
to the .site-inner
in your code. To do so, look around line 646 in your style.css file and increase the margin-top from 110px to around 200px –
.site-inner {
background-color: #fff;
clear: both;
margin-top: 200px;
position: relative;
z-index: 9;
-word-wrap: break-word;
}
Here’s how it currently looks – http://i.imgur.com/5tRZDtz.png
And here’s how it will look if you increase the margins above – http://i.imgur.com/ixcuVYW.png