Wordpressでヘッダーを固定しつつ、ページ内リンクのジャンプ先の要素がヘッダーと重ならないようにしたい

Question

前提・実現したいこと

Wordpressで新規サイトを作成しようとしています。
下記のようにページ内リンクを設置したのですが、ヘッダーを固定しているため、
ジャンプ後のページ上部が、ヘッダーと重なってしまって困っています。

---

<a href="#abc">ABCの位置へジャンプ</a>
（中略）

<h1 id="abc">ABC</h1> （中略）

---

なお、テーマはLightning（https://ja.wordpress.org/themes/lightning/）を使用しています。
ヘッダーの高さは60pxです。

試したこと

https://jugedred.net/2017/02/24/185121
上記サイトを参考に、下記のコードを
ダッシュボード＞外観＞カスタマイズ＞CSS追加
にそのままコピペしてみたのですが、なにも変化がありませんでした。

h1.local {
padding-top:60px;
margin-top:-60px;
}

テーマ自体のCSSを弄るのは怖いので、「CSS追加」画面にコピペしたのですが、
この書き方ではダメでしょうか？
Wordpress及びCSS初心者のため見当はずれな質問だったら申し訳ありませんが、
ご教示いただければ幸いです。

バージョン情報

WordPressバージョン 4.9.5
Lightningバージョン　4.1.5
使用OS　Chrome 65.0.3325.181（Official Build） （64 ビット）

Comments

[kei344]

WordPressテーマはテーマ名だけではなく取得したURLを質問文に追記ください。（URLにはリンクを張ることができます）

[aomo_tama]

失礼しました。こちらです。https://ja.wordpress.org/themes/lightning/

[kei344]

質問本文は編集することが可能です。この「質問への追記・修正の依頼」の部分はデフォルトで表示されませんので、質問本文を編集することをお勧めします。

[aomo_tama]

ご指摘ありがとうございます。本文を編集しました。

Answer 1

h1 要素に .media .media-body .media-heading {} が指定されているため、詳細度の高いセレクタで書くなどする必要があります。

【エンジニアはもう一度CSSとちゃんと向き合ってみよう - 詳細度編 - Qiita】
https://qiita.com/izumin5210/items/8ae78cb4f4bd325bccb4

【cssの詳細度・優先度を理解し使いこなすために必要なたった1つのこと - Qiita】
https://qiita.com/nekoneko-wanwan/items/69ccf2c6cecda0726ee7

【[CSS] CSSの詳細度による「適用順(優先順位)」と「上書き」 | ぶぶりんブログ】
http://buburinweb.wp.xdomain.jp/css-detailing

Comments

[aomo_tama]

ご教示ありがとうございました。リンク先を参考に勉強してみます。