Sticky header obscuring anchors

[Kevin Canney]

My project uses a sticky header.

Unfortunately, when I follow a link to a subhead in a topic, the target heading is obscured by the sticky header.

The CSS for my header follows:

header {

  top: 0;

  position: -webkit-sticky;

  position: sticky !important;

  position: 0 !important;

  background: #24292e;

  padding: 2rem 0;

  z-index:1;

  }

header .container {

  display: -ms-flexbox;

  display: flex;

  -ms-flex-direction: row;

  flex-direction: row;

  -ms-flex-align: center;

  align-items: center;

  }

header .site-nav-toggle {

  color: #f5f6f7;

  font-size: 3.5rem;

  margin-left: -1rem;

  padding: .5rem 1rem .5rem 0;

  cursor: pointer;

  }

header .site-title {

  color: white;

  font-size: 2rem;

  font-weight: 400;

  }

...and I've tried adding the following to my CSS with no luck:

Attempt 1

section[id] {

  @media (min-height: 32px) {

  scroll-margin-top: 100px; // 1

  }

}

Attempt 2

div[id] {

  @media (min-height: 32px) {

  scroll-margin-top: 100px; // 1

  }

}

Attempt 3

scroll-padding-top: 100px;

None of those additions has made a difference; the target heading is still displayed behind the sticky header.

Has anyone else had any success with this?

Thank you in advance.