Почему у моего гибкого дисплея дисплея справа пустое пространство?

Я делаю приложение, которое отображает 100 столбцов случайной высоты внутри контейнера # bar, который является div. По какой-то причине в моем приложении справа от полосок есть пробелы. Я хочу, чтобы div уменьшился до размера содержимого, а затем центрировался на экране. Мое приложение выглядит так:

JSX:

    return (
    <div id="main-container">

        <button onClick={() => newArray()}>New Array</button>

        <div id="bar-container">

            {arr.map((value, index) => (
                <div
                    className='bar'
                    key={index}
                    style={{
                        backgroundColor: "lightgreen",
                        height: `${value}px`
                    }}
                >
                    {value}
                </div>
            ))}

        </div>
    </div>

CSS:

#bar-container {
    align-items: flex-end;
    display: flex;
    margin: 100px;
}

.bar {
    margin: 0 2px;
}

Я попытался включить auto в поле для # bar-container, но он не центрирует полосы и не удаляет лишнее пустое пространство.