Width added to main-panel div Causing Pages Width to extend over the Window

Issue

I downloaded this theme for Reactbootstrap and made it work with NextJS. The problem that's bugging me is my <div className="main-panel"> in the Layout.js is extending a little off the window. Like the vertical scroll bar is adding to the horizontal margin. Would the solution be to overlay the scroll bar with div? I just want it so the <div className="main-panel"> fits in the window and doesn't need a horizontal scroll. I don't know how to explain it but I have an example to show you. https://codesandbox.io/s/stackoverflow-page-extends-off-window-d3gdc?file=/pages/index.js

Here is the Layout.js render:

return (
        <div className="wrapper">
            <Sidebar routes={routes} image={sidebarImage} background={sidebarBackground} />
            <div className="main-panel">
                <AdminNavbar />
                <div className="content">{props.children}</div>
                <AdminFooter />
                <div className="close-layer" onClick={() => document.documentElement.classList.toggle("nav-open")} />
            </div>
        </div>
    );

Solution

I found out the problem was that the <AdminFooter />'s CSS width was larger than the <div className="main-panel"> width. Since the main-panel width is set to 100% it will cause the footer to have overflow. My short term fix was to just remove the Footer in general.

<div className="wrapper">
  <Sidebar routes={routes} image={sidebarImage} background={sidebarBackground} />
  <div className="main-panel">
    <AdminNavbar />
    <div className="content">{props.children}</div>
    <div className="close-layer" onClick={()=> document.documentElement.classList.toggle("nav-open")} />
    </div>
  </div>

Answered By - Cole