Есть ли способ оставить привязку в CSS?

У меня фиксированная высота заголовка 50 пикселей. В моем теле много якорей. Проблема в том, что когда я нажимаю ссылки, указывающие на привязки, привязка появляется под моим фиксированным заголовком, и я теряю 50 пикселей содержимого (мне нужно прокрутить на 50 пикселей вверх, чтобы прочитать содержимое под заголовком).

Есть ли способ установить маржу привязки в 50 пикселей? Мое тело заполнено множеством блоков (div) с полем между ними, поэтому я не могу вставить пустой div размером 50 пикселей и затем привязать его к нему ..

html:

<div id="header"></div>
<div id="content">
     <div class="box" id="n1"></div>
     <div class="box" id="n2"></div>
     <div class="box" id="n3"></div>
</div>

css:

#header{
    height: 40px;
    width: 100%;
    margin: 0px;
    padding: 0px;
    position: fixed;
    text-align: center;
    z-index:2;
}

#content{
    padding-top: 50px; 
    margin: 0px;
}

.box {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    vertical-align : top;
    padding: 1.4%; /* Keep it in percent (%) */
    margin-bottom: 30px;
    min-height: 200px;
}