Docs - h3 heading misaligned inside div

I’m submitting a…

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Feature request
[x] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

The h3 heading for “TypeScript interfaces aren’t valid tokens” is misaligned within its div.

Expected behavior

The h3 heading should be visually left aligned within it’s div to maintain consistency with other sections.

Minimal reproduction of the problem with instructions

Open Angular’s documentation for “TypeScript interfaces aren’t valid tokens”

What is the motivation / use case for changing the behavior?

To maintain consistency with other sections in the Angular documentation.

Environment

Angular version: 1.6.9

Browser:

• Chrome (desktop) version 64.0.3282.167 (Official Build) (64-bit)
• Chrome (Android) version XX
• Chrome (iOS) version XX
• Firefox 58.0.2 (64-bit)
• Safari (desktop) Version 11.0.3 (13604.5.6)
• Safari (iOS) version XX
• IE version XX
• Edge version XX

GIF of Bug

Upon closer inspection inside Chrome’s dev tools, it looks like the heading isn’t being properly aligned for a CSS reason:

Potential Fix

A potential fix might be adding padding-left: 34px; to .l-sub-section h3 found in _subsection.scss:13. This would result in the following:

[petebacondarwin]

Actually, looking again at this, I don’t think it is the fault of the h3 element, instead it is related to the anchor that appears when you hover. This is doing some sneaky position, which affects where the h3 text begins. This is done in heading-anchors.scss:34.

[haoRchen]

After looking into this issue, and applying @SeanPrashad 's fix, I noticed that the header is not being aligned properly in mobile/responsive views. See below:

Should I proceed with his solution?