Code blocks (for anchor links) causing text on a blog page to auto-shift with every paragraph to the right

I've been trying to figure this out all do but I don't know how to fix this. I have a straight-forward blog post with text broken down into sections and a couple of images. I created a table of contents and used code blocks to create the anchor links for each section. This worked perfectly fine on all my previous posts but the latest one is causing a major issue.

The code block (inserted above each section heading) seems to shift the text to the right and I can't for the life of me figure out why. I have removed all the code blocks on the page and all the text shifts back to the left as it should but as soon as I put the code blocks back in it shifts everything to the right. Its almost like its adding some sort of padding in front of each paragraph and I have no idea why.

I have published several other blog posts doing the exact same thing and I've had no issues with the text. When I am in editor mode it all displays correctly. I've also tried it on various browsers and its the same issue.

I've attached two screenshots - the live page with the text shifted automatically and another screenshot when I go into the Editor which as you will see does not have the problem I am trying to fix on the live page so I have no clue what to do about this.

I'm so frustrated by this. Does anyone have any idea why this is happening?

Anyone??

Have you tried creating a code block with a plain ol' `<h1>` and testing to see if it does the same thing?

If it doesn't- then it's your custom code.