Как увеличить ширину моего контейнера, чтобы вместить больше предметов

Question

Я строю приборную панель, используя Plotly Da sh. Я использую bootstrap .min. css, я хотел бы увеличить ширину моего контейнера, чтобы я мог разместить два графика в одной строке.

Мои вторые графики (Линейный график), имеет большую ширину, следовательно, не может выровнять их в один ряд.

Я приложил снимок ниже,

DA SH КОД UI:

# the style arguments for the sidebar. We use position:fixed and a fixed width
SIDEBAR_STYLE = {

    "top": 0,
    "left": 0,
    "bottom": 0,
    "width": "16rem",
    "padding": "2rem 1rem",
    "background-color": "#f8f9fa",
    "position": "fixed",
    "color":"#000",
}

# the styles for the main content position it to the right of the sidebar and
# add some padding.
CONTENT_STYLE = {
    "margin-left": "18rem",
    "margin-right": "2rem",
    "padding": "2rem 1rem",

}

sidebar = html.Div(
    [
        html.H2("Plate", className="display-4"),
        html.Hr(),
        html.P(
            "A simple dashboard", className="lead"
        ),
        dbc.Nav(
            [
                dbc.NavLink("Dashboard", href="/dashboard", id="page-1-link"),
                dbc.NavLink("Analytics", href="/page-2", id="page-2-link"),
                dbc.NavLink("Page 3", href="/page-3", id="page-3-link"),
                html.Hr(),
                dbc.NavLink("Logout", href="/logout", id="page-4-link"),
            ],
            vertical=True,
            pills=True,
        ),
    ],
    style=SIDEBAR_STYLE,
)

content = html.Div(id='page-content' , className ='container' ,style=CONTENT_STYLE)



app.layout = html.Div([dcc.Location(id="url"), sidebar, content])
app.config.suppress_callback_exceptions = True


# this callback uses the current pathname to set the active state of the
# corresponding nav link to true, allowing users to tell see page they are on
@app.callback(
    [Output(f"page-{i}-link", "active") for i in range(1, 4)],
    [Input("url", "pathname")],
)
def toggle_active_links(pathname):
    if pathname == "/" or pathname == "/dashboard":
        # Treat page 1 as the homepage / index
        return True, False, False
    return [pathname == f"/page-{i}" for i in range(1, 4)]


@app.callback(Output("page-content", "children"), [Input("url", "pathname")])
def render_page_content(pathname):
    if pathname in ["/", "/page-1", "/dashboard"]:
        dashBoard = html.Div([
            html.Div([dcc.DatePickerRange(
                id='my-date-picker-range',
                min_date_allowed=dt(minDate[0],minDate[1],minDate[2]),
                max_date_allowed=dt(maxDate[0],maxDate[1],maxDate[2]),
                initial_visible_month=dt(maxDate[0],maxDate[1],maxDate[2]),
                start_date=dt(minDate[0],minDate[1],minDate[2]).date(),
                end_date=dt(maxDate[0],maxDate[1],maxDate[2]).date()
                ),
            html.Button(id="date-button" , children ="Analyze" , n_clicks = 0, className = 'btn btn-outline-success')
                ], className = 'row'),

            html.Div([
                html.Br(),      

                html.Div([

                    html.H4(['Category Overview'] , className = 'display-4'),
                    html.Br(),
                    html.Br(),
                    ], className = 'row'),
                html.Div([
                    html.Div([dcc.Graph(id='categoryPerformance',figure = dict(data=ge.returnCategoryOverviewBarGraph(df)[0],
                     layout=ge.returnCategoryOverviewBarGraph(df)[1]))

                        ], className = 'col'),
                    html.Div([dcc.Graph(id='categoryPerformanceTrend')

                        ], className = 'col')


                    ], className = 'row'),
                html.Hr(),
                html.Div([
                    html.Div([
                        dcc.Dropdown(id = 'category-dd', options = category_items, value = 'Food')

                        ], className = 'col-6 col-md-4'),
                    html.Div([

                        dcc.Slider(id = 'headCount' , min = 5, max=20 , step = 5 , value = 5, marks = {i: 'Count {}'.format(i) for i in range(5,21,5)})

                        ], className = 'col-12 col-sm-6 col-md-8')
                    ], className = 'row'),
                html.Div([
                    html.Br(),
                    html.Br(),
                    html.Div([

                        dcc.Graph(id ='idvlCategoryPerformanceBest')


                        ], className ='col'),
                    html.Div([

                        dcc.Graph(id ='idvlCategoryPerformanceLeast')


                        ], className = 'col')



                    ], className = 'row')




                ])



            ] , className='container')
        return dashBoard

У меня нулевой уровень знаний в веб-интерфейсе / css, любая помощь очень ценится. Спасибо!