🚀 Gen 5 of the leading AI app deployment platform launches October 6. Click for the livestream.

Justify In Row of Columns Not Working

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})
])

Hi @hschindele

If you remove this from the Dropdowns it should work.

style={
    'width':'70%'
}