在div中使用居中按钮正确放置6列时出现问题

<div style="display: flex; justify-content: center;">
  <div style="flex: 1;">Column 1</div>
  <div style="flex: 1;">Column 2</div>
  <div style="flex: 1;">Column 3</div>
  <div style="flex: 1;">Column 4</div>
  <div style="flex: 1;">Column 5</div>
  <div style="flex: 1;">Column 6</div>
</div>

<div style="display: grid; grid-template-columns: repeat(6, 1fr);">
  <div>Column 1</div>
  <div>Column 2</div>
  <div>Column 3</div>
  <div>Column 4</div>
  <div>Column 5</div>
  <div>Column 6</div>
</div>

<div>
  <div style="float: left; width: 16.66%;">Column 1</div>
  <div style="float: left; width: 16.66%;">Column 2</div>
  <div style="float: left; width: 16.66%;">Column 3</div>
  <div style="float: left; width: 16.66%;">Column 4</div>
  <div style="float: left; width: 16.66%;">Column 5</div>
  <div style="float: left; width: 16.66%;">Column 6</div>
  <div style="clear: both;"></div>
</div>