fix: wrong margin inside headers

[NichtsHsu]

Description

If you have an element included inside a header, for an example:

## The `var` keyword

You will find that the element var is set to right margin:

The bug arises from the code here:

{% assign left = left | replace: '">', '"><span class="mr-2">' | append: '</span>' %}

To fix it, we can use replace_first instead of replace:

{% assign left = left | replace_first: '">', '"><span class="mr-2">' | append: '</span>' %}

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Documentation update

How has this been tested

• I have run bash ./tools/deploy.sh --dry-run (at the root of the project) locally and passed
• I have tested this feature in the browser

Test Configuration

• Browser type & version: Google Chrome 103.0.5060.114
• Operating system: Ubuntu 20.04
• Ruby version: 2.7.0p0
• Bundler version: 2.3.13
• Jekyll version: 4.2.1

Checklist

• I have performed a self-review of my code
• I have commented on my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings