I have a little blog with code samples. The syntax is in a code tag which is in a pre tag.
The problem is that the first line in the code tag is moved to the right/middle (a tab or many).

Html:

<pre>                
    <header class="code-header flex-between-center">
        <a href="https://github.com/SteinLundbeckTech/blog.ConfigureAspNetCore/blob/main/BlogStatics.cs" target="_blank" title="View BlogStatics.cs" class="bold filename">BlogStatics.cs <i class="creator-icon fa-icon fas fa-magnifying-glass" aria-hidden="true"></i></a>
        <i class="creator-icon fa-icon far fa-copy copy-syntax-icon" onclick="copyToClipboard('Code3');" title="Copy syntax" aria-hidden="true"></i><span class="sr-only">Copy syntax</span>
    </header>
    <code id="Code3">
        <section>
            public enum Feature
        {
        SSL,
        DefaultRoute,
        Service
        }

        public enum ServiceScope
        {
        Scoped,
        Singleton,
        Transient
        }
        </section>
    </code>
</pre>

sass/CSS:

pre {
    $mrg: 8px;

    display: block;
    background-color: black;
    color: getColor(Tech);
    margin-top: $mrg;
    margin-bottom: $mrg;
    font-family: calibri, Arial, sans-serif;
    font-size: 14px;
    padding: 9px;
    overflow: scroll;

    & > header {
        $mrg: 12px;

        position: relative;
        padding-left: $mrg;
        padding-right: $mrg;

        & > .copy-syntax-icon {
            position: relative;
            top: -12px;
            left: 20px;

            &:hover {
                cursor: pointer;
                color: getColor(Light);
            }
        }
    }

    & > code {
        overflow: inherit;
    }
}

Data from database value:

public enum Feature
{
    SSL,
    DefaultRoute,
    Service
}

public enum ServiceScope
{
    Scoped,
    Singleton,
    Transient
}

Which results in:

You can see it action at https://blog.sltech.no