Hide grey area in Docx preview JS using CSS

How do I align word file in the container in order to hide the gray area as seen in the image below?

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mammoth/1.4.18/mammoth.browser.min.js"></script>
<script type="text/javascript">
    let currentDocument = null;
    const docxOptions = Object.assign(docx.defaultOptions, {
        debug: true,
        experimental: true,
        useMathMLPolyfill: true
    });
 
    const container = document.querySelector("#document-container");
 
    function renderDocx(file) {
        currentDocument = file;
        if (!currentDocument)
            return;
 
        docx.renderAsync(currentDocument, container, null, docxOptions)
            .then((x) => {
                renderThumbnails(container, document.querySelector("#thumbnails-container"));
            });
    }
 
    document.querySelector("#loadButton").addEventListener("click", ev => {
        renderDocx(document.getElementById("files").files[0]);
    });
 
    Object.keys(docxOptions).filter(key => !/className/i.test(key)).forEach(function (key) {
        const listItem = document.createElement("li");
        listItem.innerHTML = `
<div class="dropdown-item">
    <div class="form-check">
        <label class="form-check-name"><input type="checkbox" class="form-check-input" ${docxOptions[key] ? 'checked' : ''}> ${key}</label>
    </div>
</div>`;
 
        const checkInput = listItem.querySelector("input");
 
        checkInput.addEventListener("click", (e) => {
            docxOptions[key] = checkInput.checked;
            renderDocx(currentDocument);
        });
    });
 
    container.addEventListener("dragover", ev => ev.preventDefault());
    container.addEventListener("drop", ev => {
        ev.preventDefault();
        renderDocx(ev.dataTransfer.files[0]);
    });
</script>