Black Lives Matter. Please consider donating to Black Girls Code today.
https://www.blackgirlscode.com

How to remove these white spaces

I have build a sorting visualizer, everything is working fine, except for the minor bug that is very evident in this GIF:

Updating... (1)
The plots need to be side be side, and because of that the right ones are going out of the limit, I am failing to work out a way to make it all in alignment, and remove those white spaces in the other divs.
I am attaching the layout code for the first half of the app, i.e. the till the first two tiles, I guess that would be enough to figure out the flow.
It would be great to get some help so that I can finish off the little project :slight_smile:

fig_bubble = {
    "data": [initial_trace],
    "layout": go.Layout(
        font=dict(color=colors["text"]),
        paper_bgcolor=colors["background"],
        plot_bgcolor=colors["background"],
        height=400,
        width=700,
        hovermode="closest",
    ),
}
fig_selection = {
    "data": [initial_trace],
    "layout": go.Layout(
        font=dict(color=colors["text"]),
        paper_bgcolor=colors["background"],
        plot_bgcolor=colors["background"],
        height=400,
        width=700,
        hovermode="closest",
    ),
}
app.layout = html.Div(
    id="intro",
    style={"backgroundColor": colors["background"],"width": "100%"},
    children=[
        html.Div(
            children="DASH SORTER",
            style={
                "textAlign": "center",
                "color": colors["text"],
                "fontSize": 50,
                "fontWeight": 900,
                "height": "70px",
                "width": "104%"
            },
        ),
        html.Div(
            id="first_row",
            children=[
                html.Div(
                    style={
                        "width": "100%",
                        "height": "100%",
                        "backgroundColor": colors["background"],
                        "display": "inline-block",
                        "text-align": "center",
                    },
                    children=[
                        html.Button(
                            "SLIDE TO CHOOSE THE SIZE OF ARRAY AND PRESS HERE WHEN YOU ARE SATISFIED WITH THE RANDOMNESS TO BEGIN SORTING!",
                            id="start",
                            n_clicks=0,
                            style={
                                "text-align": "center",
                                "fontSize": 15,
                                "backgroundColor": colors["background"],
                                "marginBottom": "1%",
                                "marginTop": "2%",
                                "height": "30px",
                                "color": "crimson",
                            },
                        ),
                    ],
                ),
            ],
        ),
        html.Div(
            dcc.Slider(
                id="my-slider",
                min=0,
                max=100,
                step=5,
                value=20,
                marks={ i : str(i) for i in range(0,101,5)
                },
                tooltip={"always_visible": True},
            ),
            style={"height": "30px", "width": "100%", "display": "inline-block"},
        ),
        html.Div(
            id="first-two-sorts",
            children=[
                html.Div(
                    style={
                        "width": "50%",
                        "height": "50%",
                        "backgroundColor": colors["background"],
                        "display": "inline-block",
                    },
                    children=[html.Div(dcc.Graph(id="fig_bubble", figure=fig_bubble))],
                ),
                html.Div(
                    style={
                        "width": "50%",
                        "height": "50%",
                        "backgroundColor": colors["background"],
                        "display": "inline-block",
                    },
                    children=[
                        html.Div(dcc.Graph(id="fig_selection", figure=fig_selection))
                    ],
                ),
            ],
        ),
        html.Div(
            id="first-two-names",
            children=[
                html.Div(
                    style={
                        "width": "50%",
                        "height": "100%",
                        "display": "inline-block",
                        "fontSize": 15,
                        "height": "20px",
                    },
                    children=[
                        html.Div(
                            children="BUBBLE SORT",
                            style={
                                "textAlign": "center",
                                "color": colors["text"],
                                "fontSize": 29,
                                "fontWeight": 500,
                            },
                        )
                    ],
                ),
                html.Div(
                    style={
                        "width": "50%",
                        "height": "100%",
                        "display": "inline-block",
                        "fontSize": 15,
                        "height": "20px",
                    },
                    children=[
                        html.Div(
                            children="SELECTION SORT",
                            style={
                                "textAlign": "center",
                                "color": colors["text"],
                                "fontSize": 29,
                                "fontWeight": 500,
                            },
                        )
                    ],
                ),
            ],
        ),
        html.Div(
            id="first-two-stats",
            children=[
                html.Div(
                    style={
                        "width": "50%",
                        "height": "100%",
                        "display": "inline-block",
                        "fontSize": 15,
                        "height": "30px",
                        "marginTop": "0.8%",
                    },
                    children=[
                        html.Div(
                            id="ops-b",
                            style={"textAlign": "center", "color": colors["text"],},
                        )
                    ],
                ),
                html.Div(
                    style={
                        "width": "50%",
                        "height": "100%",
                        "display": "inline-block",
                        "fontSize": 15,
                        "height": "30px",
                        "marginTop": "0.8%",
                    },
                    children=[
                        html.Div(
                            id="ops-s",
                            style={"textAlign": "center", "color": colors["text"],},
                        )
                    ],
                ),
            ],
        ),