Header following a code block - scrollbar overlapse

[AntonyGarand]

Describe the bug
Making a header next to a code block with a horizontal scrollbar makes an area overlapping with the scrollbar and the header.

Tested under Firefox only.

This makes us select the text instead of / while moving the scrollbar, which is annoying.

To Reproduce
Steps to reproduce the behavior:

Create a blog post with the following content:

-``` Ignore the prefixed -, this is for the github markdown. --- Continuing the line to get a scrollbar, you can ignore this content.
-```
# This is a header. It should overlap with the scrollbar.

Preview or post it, and try moving the horizontal scrollbar by selecting an area above the header text.

Expected behavior
The scrollbar moves without selecting the text.

Screenshots

Desktop (please complete the following information):

• OS: Windows
• Browser: Firefox
• Version: 64.0

Additional context

This can be fixed with the following CSS:

div.highlight + h1 {
    margin-top: 50px;
}

Where h1 can be h1-h6.

[Zhao-Andy]

Thanks @AntonyGarand, your solution makes sense. Whoever takes this should test in various browser if the anchor link for the header jumps properly.