Why does my display flexbox have empty white space on the right?

Question

I am making an app that displays 100 bars of random heights inside of #bar-container which is a div. For some reason, my app has some white spaces to the right of my bars. I want the div to shrink to the size of the content and then center on the screen. My app looks like this:

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;
}

I tried to include auto in margin for #bar-container but it doesn't center the bars and it does not remove that extra white space.

Answer 1

Use justify-content property,

justify-content: center;

Example

#bar-container {
  align-items: flex-end;
  display: flex;
  justify-content: center;
}

.bar {
  margin: 0 2px;
  background: lightgreen;
  width: 10px;
}

<div id="bar-container">

  <div class="bar" style="height: 70px"></div>
  <div class="bar" style="height: 170px"></div>
  <div class="bar" style="height: 20px"></div>
  <div class="bar" style="height: 120px"></div>
  <div class="bar" style="height: 50px"></div>
  <div class="bar" style="height: 100px"></div>
  <div class="bar" style="height: 90px"></div>
  <div class="bar" style="height: 110px"></div>
  <div class="bar" style="height: 40px"></div>
  <div class="bar" style="height: 30px"></div>
  <div class="bar" style="height: 140px"></div>

</div>