There is a Horizontal Scrollbar dasboard plotly

Question

I am building a dashboard with multi-Page Apps plotly and bootstrap. There is a horizontal scrollbar overflow on my website. I am looking to remove a scroll bar, and remove this blank space after imagen, thank you.

Here is the code:

App:

import pandas as pd
from dash_auth import BasicAuth
from dash import Dash, dcc, html, Input, Output, callback
from dash_extensions.enrich import ServersideOutput, DashProxy, ServersideOutputTransform
import dash_bootstrap_components as dbc

from pages import test, error_404

df = pd.read_parquet('dataset.parquet.gzip')

external_stylesheets = [
    dbc.themes.BOOTSTRAP,
    dbc.icons.BOOTSTRAP,
]

app = Dash(__name__, title = 'Test',
    external_stylesheets=external_stylesheets,
    suppress_callback_exceptions=True,
)
server = app.server

app.layout = html.Div([

    dcc.Location(id="url", pathname="", refresh=False),

    # Header
    dbc.Row([
        dbc.Col(html.A(
            html.Img(src=app.get_asset_url("leters.jpg"), className="img-fluid brand-other"),
            id="logo",
            href="https://www.leters.com/", target="blank"
        ), width='12', class_name='justify-content-end d-flex'),
    ]),

    html.Div(id='page-content'),  

], className='col-12 col-lg-12')


@callback(
    Output(component_id='page-content', component_property='children'),
    Input(component_id='url', component_property='pathname')
)
def routing(path):
    print(path)
    if path == "":
        return test.test
    else:
        return error_404

if __name__ == "__main__":
    app.run_server(debug=True)

test:

from dash import html

test = html.Div([
    html.H3("test", className="sub_title"),
])

Answer 1

I think you should change from html.Div to dbc.Container as below:

app.layout = dbc.Container([

    dcc.Location(id="url", pathname="", refresh=False),

    # Header
    dbc.Row([
        dbc.Col(html.A(
            html.Img(src=app.get_asset_url("leters.jpg"), className="img-fluid brand-other"),
            id="logo",
            href="https://www.leters.com/", target="blank"
        ), width='12', class_name='justify-content-end d-flex'),
    ]),

    html.Div(id='page-content'),

], fluid=True)

Hope this help.