CSS to push content down page

On a web page I'm working on I have a fixed #top section containing the nav which is causing the content below to partially hide behind it.

The p开发者_StackOverflow社区age is this: http://s361608839.websitehome.co.uk/pt-build/templatebuild/

I've tried adding margin-top to #slider and margin-bottom to #top to try and push each other apart but none of those have worked.

Any ideas?

just change

div.anythingSlider {
  position: relative;
  padding: 110px 350px 28px 45px;
}

I changed the top padding from 0 to 110px

Your #top is fixed, so the margins won't work.

You have to do two things to fix this problem:

1. Give your body a padding-top or margin-top equal to the height of #top (151px)
2. Give #top a top:0; so it still sticks to the top of the page.

You can use

div.anythingSlider{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

top: 50% will shift your content down while translateY will put it back in place.

just add top: 0; to #topwrap and margin-top: 100px to body. (replace 100px with a value you like, 100px is the minimum to see the first heading, but your #topwrap is 151px tall - just try wich looks best)

Use padding-top:150px; on the div with class anythingSlider