Boostrap using fixed navbar and anchor tags to jump to sections [duplicate]

Question

I am trying to use anchor tags to navigate to specific sections of a webpage using bootstrap and a navbar that is fixed to the top. The problem is when I click the anchor links, they don't correctly scroll to the start of the section, it scrolls past the section start, because of the margin applied to the body.

body {
    margin-top: 60px;
}

How can I fix this?

See the following jsFiddle for a full demo: http://jsfiddle.net/6kwrY/

Answer 1

The solution is to use:

.section {
    padding-top: 60px;
    margin-top: -60px;
}

Answer 2

Add a margin via padding for all section p's unless they are called 'first'.

body {
    margin-top: 60px;
}

section p {
    font-size: 30px;
    line-height: 1.5;
    margin-bottom: 35px;
    padding-top: 60px;
}

#first p {
        padding-top: 0px;
}