I have three columns in a row that I would like to align using justify=‘start’, but when I run the app they are still very spaced out.
Here is what they look like and I want them to be squished together.
Any idea why justify wouldnt be working?
Here is my code
records_layout = html.Div([
Header(app),
dbc.Row([
sidebar,
dbc.Col([
html.Br(),
html.H3('GMA World Records and Rankings'),
html.Hr(),
dbc.Row([
dbc.Col([
html.H5('Select Record Type'),
dcc.Dropdown(
id='recordselect',
options=[
{'label': 'All', 'value': 'all'},
{'label': 'Time Trial', 'value': 'timetrial'},
{'label': 'High Score', 'value': 'highscore'},
{'label': 'Mountain Pt Ranking', 'value': 'mountain'}
],
value='all',
searchable=False,
style={
'width':'70%'
}
),
]),
dbc.Col([
html.H5('Sort By'),
dcc.Dropdown(
id='sortselect',
options=[
{'label': 'Default (Mountain)', 'value': 'def'},
{'label': 'Newest to Oldest', 'value': 'n2o'},
{'label': 'Oldest to Newest', 'value': 'o2n'},
{'label': 'Challenge Type', 'value': 'chaltype'},
{'label': 'Player', 'value': 'player'},
],
value='def',
searchable=False,
style={
'width':'70%'
}
),
]),
dbc.Col([
html.Div([
html.H5(' Community Sum of Best: '+convertMillis(int(totsumofbest))+' ')
],
style={'border':'2px black solid','text-align': 'Center','verticalAlign':'middle'
}
)
])
],
justify='start',
),
html.Br(),
dbc.Row([
html.Div(id='record-content')
])
],
style={'margin-left':20})
],
style={'padding-left':20})
])