Не могу определить, почему выравнивание стержней не выравнивается

Question

Я пытаюсь сделать гистограмму с помощью реакции.

Когда я начинаю добавлять все больше и больше баров, выравнивание становится неправильным, как показано на рисунке ниже

Здесь мой css код для баров

.bar{
    height: 50%;
    width:20px;
    padding: 20px;
    background-color: orange;
    margin-left: 20px;
    margin-top: 98px;
    z-index: 500;
    border-radius: 10px;
}

Я не могу понять, почему это происходит, потому что, как правило, происходит переполнение, ширина моих баров уменьшается, что приводит к смещению. Пожалуйста, помогите мне узнать, как я могу сделать постоянную ширину моего бара. И дайте мне знать, если потребуется дополнительная информация.

вот код для родителя, который был задан

.parent{
    height: 350px;
    width: 740px;
    border: 1px solid black;
    z-index: 100;
    overflow-x: auto;
    margin-left: 265px;
    margin-right: 10px;
    margin-top: -376px;
    display: flex;
    flex-flow: row;
    flex-shrink: 0;

}