Aligning word container

Question

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

Here is the Markup

<div class="vh-100 d-flex flex-column">
                            <div class="hstack p-2 gap-2 bg-light">
                                <input id="files" type="file" runat="server" class="form-control" style="width: 50ch; font-size: 11pt;" accept=".docx" />
                                <button id="loadButton" runat="server" type="button" class="btn btn-primary px-4" style="font-size: 10pt; background: #0b2436;">Load</button>
                            </div>
                            <div class="flex-grow-1 d-flex flex-row" style="height: 0;">
                                <details class="docx-thumbnails h-100">
                                    <summary></summary>
                                    <div id="thumbnails-container" class="docx-thumbnails-container"></div>
                                </details>
                                <div id="document-container" class="overflow-auto flex-grow-1 h-100"></div>
                            </div>
                        </div>

The script that loads the word file into the container

    <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>

Answer 1

I used this styles and it works

<style type="text/css">
    .docx {color:black;width:100% !important; }
    .docx-wrapper {padding:0px !important; }
    .docx-wrapper > section.docx {background:white;margin-bottom:0px !important; }
</style>