How to manage buttons alignment in dash bootstrap component (dbc) navbar element?

Question

I guess my problem is with formating html which is created automatically.

I need a navbar with several buttons. 1 on the left, 2 on the right. Between those buttons i need some text.

I manged to do that with this code below:

navbar = dbc.NavbarSimple(children=[
    dbc.Button(
        "Меню",
        id="menu_togle",
        n_clicks=0,
        color="secondary",
    ),
    html.H1(children=dashboard_name, style={'textAlign': 'center', 'color':'white'}),
    dbc.Container([
        dbc.Button(
            "Инструкция",
            id="instruction",
            n_clicks=0,
            color="secondary",
            className="me-1"
        ),
        dbc.Button(
            "Изменение параметров дашборда",
            id="open_offcanvas_scrollable",
            n_clicks=0,
            color="secondary",
            className="me-1"
        ),
    ],
    ),
],
color="dark",
dark=True,
fluid=True,
fixed = 'top',
links_left=True,
style={'display': 'flex', 'justify-content': 'space-between'}
)

But HTML looks wierd — has a lots of divs:

<nav color="dark" class="navbar navbar-expand-md navbar-dark bg-dark fixed-top" style="display: flex; justify-content: space-between;">
  <div class="container-fluid">
    <button n_clicks="0" n_clicks_timestamp="-1" type="button" aria-label="Toggle navigation" class="navbar-toggler collapsed">
    <span class="navbar-toggler-icon"></span>
    </button>
    <div class="navbar-collapse collapse">
      <div class="me-auto navbar-nav">
        <button id="menu_togle" class="btn btn-secondary">Меню</button>
        <h1 style="text-align: center; color: white;">Дашборд по репрезентативности экспедиции</h1>
        <div class="container">
          <button id="instruction" class="me-1 btn btn-secondary">Инструкция</button>
          <button id="open_offcanvas_scrollable" class="me-1 btn btn-secondary">Изменение параметров дашборда</button>
        </div>
      </div>
    </div>
  </div>
</nav>

And all classes I add to navbar elements stays only in navbar elements, but not in those divs.

I also tried to do that with dbc.Row, but that also didn't help (i guess by the same reason).

Elements looks like that: buttons on navbar

I'd appreciate any help you can give.

EDITED

I've managed to do something similar to what i need with dbc.ButtonGroup, but some previous leveled div still have margin-end which i couldn't control.

Code sample:

navbar = dbc.NavbarSimple(children=[
        dbc.ButtonGroup([
        
        dbc.Button(
            "Меню",
            id="menu_togle",
            n_clicks=0,
            color="secondary",
            className="me-5"
        ),
        html.H1(children=dashboard_name, style={'textAlign': 'center', 'color':'white'}, className="me-5, ms-5"),
        dbc.ButtonGroup([
            dbc.Button(
                "Инструкция",
                id="instruction",
                n_clicks=0,
                color="secondary",
                className="me-1, ms-5"
            ),
            dbc.Button(
                "Изменение параметров дашборда",
                id="open_offcanvas_scrollable",
                n_clicks=0,
                color="secondary",
                className="ms-1"
            ),
        ],
        ),
        
        ])
    ],
    color="dark",
    dark=True,
    fluid=True,
    fixed = 'top',
    links_left=True,
    style={'display': 'flex', 'justify-content': 'space-between'}
    )

<nav color="dark" class="navbar navbar-expand-md navbar-dark bg-dark fixed-top" style="display: flex; justify-content: space-between;">
  <div class="container-fluid">
  <button n_clicks="0" n_clicks_timestamp="-1" type="button" aria-label="Toggle navigation" class="navbar-toggler collapsed">
  <span class="navbar-toggler-icon"></span>
  </button>
    <div class="navbar-collapse collapse">
      <div class="me-auto navbar-nav">
        <div role="group" class="btn-group">
        <button id="menu_togle" class="me-5 btn btn-secondary">Меню</button>
        <h1 class="me-5, ms-5" style="text-align: center; color: white;">Дашборд по репрезентативности экспедиции</h1>
          <div role="group" class="btn-group">
            <button id="instruction" class="me-1, ms-5 btn btn-secondary">Инструкция</button>
            <button id="open_offcanvas_scrollable" class="ms-1 btn btn-secondary">Изменение параметров дашборда</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</nav>

updated navbar with margin on the right

Answer 1

I am not shure if its the only right method, but i could fix margins with this method.

https://community.plotly.com/t/margins-in-dbc-components/65987/4?u=vokiatik

That is what i added:

.navbar-nav{
    margin-right: 0;
    width: 100%;
}


#button-container{
    width: 100%;
    justify-content: space-between;
    text-align: end;
}

.btn-group-vertical>.btn, .btn-group>.btn {
    position: relative;
    flex: inherit;
}