Why isn't this html div element getting centred? - css

Question

I want to centre the top drop down here within the blue background block:
https://imgur.com/a/BfWxtes
I've tried a lot of different things including following this guide:
https://www.w3schools.com/howto/howto_css_image_center.asp. I've also tried adding a float:center argument, but I cant for the life of me get it to work.
Here is the relevant part of the code I've written: (I want to centre the elements that come under the '# First row of the dropdown menus' section)
html.Div([
# First row of the dropdown menus
html.Div([
html.Div([
dcc.Dropdown(
id="court_dd_0",
options=[
{'label': i, 'value': i} for i in sorted(list(crest['court_name'].unique()))
],
value = 'Aylesbury Crown Court',
#placeholder='[Placeholder] John Doe',
),
], style={'width': '50%',
'display': 'block',
'margin-left': 'auto',
'margin-right': 'auto',
'textAlign': 'center'}, className='six columns'),
], className='row'),
# Second row of the dropdown menus
html.Div([
html.Div([
dcc.Dropdown(
id="offence_group_dd_2",
options=[
{'label': i, 'value': i} for i in sorted(list(df_gb_offences.offence_ho_group_desc_mso.unique()))
],
value = None,
placeholder='Select breakdown by offence group',
),
], style={'padding': 10}, className="six columns"),
html.Div([
dcc.Dropdown(
id="offence_code_dd_3",
options=[
{'label': i, 'value': i} for i in sorted(list(crest.offence_ho_code_desc_mso.unique()))
],
#value = None,
placeholder='Select breakdown by offence',
),
], style={'padding': 10}, className="six columns"),
], className='row'),
# Third row of the dropdown menus
html.Div([
html.Div([
dcc.Slider(
id='year_slider_0',
min=crest['year'].min(),
max=crest['year'].max(),
value=crest['year'].max(),
marks={str(year): str(year) for year in crest['year'].unique()}
),
], className="twelve columns"),
], style={'padding': 10}, className='row'),
# End of third row of the drop down menus
], style={
'textAlign': 'center',
'margin':25,
'backgroundColor': colors['background'],
'width': '95%',
'height': '100%',
'display': 'inline-block',
'padding': 10
}),

Answer 1

It looks like you specified offence_group_dd_2 to take up 6 columns in the row, which is exactly it appears to be doing. Try removing the "six columns" class names.