Facebook Comments: Unable to center the box

[abarajithan11]

I'm trying to add Facebook comments to my blog using these two guides:

1. https://developers.facebook.com/docs/plugins/comments/#
2. https://ghost.org/integrations/facebook/

However, it looks like this, example page:

How do I center the comment box?

My code injection header and footer are as follows: Header:

<meta property="fb:admins" content="abarajithan11"/>
<style>
.post-template {
    text-align: justify;
}
</style>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/katex.css" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/katex.js" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/contrib/auto-render.min.js" crossorigin="anonymous" onload="renderMathInElement(document.body);"></script>

Footer:

<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v12.0" nonce="C5ma3g6v"></script>

I added the following to my post.hbs (attached as well):

{{!-- If you want to embed comments, this is a good place to do it! --}}
          <section class="m-comments">
            <div class="fb-comments" data-href="{{url absolute="true"}}" data-width="100%" data-numposts="10" data-colorscheme="dark"></div>
          </section>
``
Full file:
[post.txt](https://github.com/eddiesigner/liebling/files/7894598/post.txt)
`

[eddiesigner]

It seems like you're missing a div, it should look like this:

<section class="m-comments">
  <div class="l-wrapper in-comments">
    <div class="fb-comments" data-href="{{url absolute="true"}}" data-width="100%" data-numposts="10" data-colorscheme="dark"></div>
  </div>
</section>

[abarajithan11]

Thanks a lot for the great theme and support. That works!