Prism suggestion yields weird looking code element

[ioncodes]

I followed the recommended way to add syntax highlighting via Prism. I added the following code to my post via code injection:

Header:

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/themes/prism.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/themes/prism-tomorrow.min.css" />

<style>
  pre[class*="language-"] {
    margin: 0 0 1.5em !important;
  }
  code {
    text-shadow: none !important;
  }
  .token.operator {
    background: none !important;
  }
  :not(pre) > code[class*="language-"],
  pre[class*="language-"] {
    background: #20262E !important;
  }
</style>

Footer:

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/components/prism-markup.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/components/prism-css.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/components/prism-javascript.min.js"></script>

However, looking up the element in the rendered post shows an element that has a weird looking height and the padding on the left looks a bit off too:

This is the view from the post editor:

I would also like to know what changes I have to make to prevent the source code from edging too close to the right side of the code block. I'd prefer to have an equal padding on the left and right:

[eddiesigner]

Could you please post a link where I can see it live?

[ioncodes]

Sure, here's a link: https://blog.layle.dev/instrumentation-with-revng/.

[eddiesigner]

You can inject this code in the Ghost Admin:

<style>
.l-post-content pre {
  padding: 0 16px !important;
  overflow: hidden !important;
}

.l-post-content pre > code {
  padding: 16px 0 !important;
  overflow: auto !important;
}
</style>

[ioncodes]

Seems to work! Thank you!

[ioncodes]

Just noticed an issue caused by that suggestion. Now scrollbars have a padding, ideally they would just be as long as the width of the element. Example: https://layle.me/instrumentation-with-revng/