Dash - dbc.container fluid = True does not cover all available space

Question

So I will keep it short. I am using the dash website code and trying to make the navbar take the full width of the page. I saw it suppose to work if I set the fluid = true in the container. it does make the width bigger but does not cover the page. thanks for taking the time! here is the code:

import dash_bootstrap_components as dbc
import dash_html_components as html
from dash.dependencies import Input, Output, State
import dash

app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])


PLOTLY_LOGO = "https://images.plot.ly/logo/new-branding/plotly-logomark.png"

search_bar = dbc.Row(
    [
        dbc.Col(dbc.Input(type="search", placeholder="Search")),
        dbc.Col(
            dbc.Button(
                "Search", color="primary", className="ml-2", n_clicks=0
            ),
            width="auto",
        ),
    ],
    no_gutters=True,
    className="ml-auto flex-nowrap mt-3 mt-md-0",
    align="center",
)

navbar = dbc.Navbar(
    [
        html.A(
            # Use row and col to control vertical alignment of logo / brand
            dbc.Row(
                [
                    dbc.Col(html.Img(src=PLOTLY_LOGO, height="30px")),
                    dbc.Col(dbc.NavbarBrand("Navbar", className="ml-2")),
                ],
                align="center",
                no_gutters=True,
            ),
            href="https://plotly.com",
        ),
        dbc.NavbarToggler(id="navbar-toggler", n_clicks=0),
        dbc.Collapse(
            search_bar, id="navbar-collapse", navbar=True, is_open=False
        ),
    ],
    color="dark",
    dark=True,
)


@app.callback(
    Output("navbar-collapse", "is_open"),
    [Input("navbar-toggler", "n_clicks")],
    [State("navbar-collapse", "is_open")],
)
def toggle_navbar_collapse(n, is_open):
    if n:
        return not is_open
    return is_open


app.layout = dbc.Container(
    children=[
        navbar
    ],
    fluid=True,
)

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

Answer 1

.container-fluid adds 15px padding to the left and right. So you could overwrite this to 0 in your stylesheets or inline using the style property.

But I think it makes more sense to just not use a container here:

app.layout = html.Div(children=[navbar])

intead of this:

app.layout = dbc.Container(
    children=[navbar],
    fluid=True,
)