CSS无法居中大量浮动：左元素答案

【问题标题】：CSS unable to center big amount of float:left elementsCSS无法居中大量浮动：左元素
【发布时间】：2020-04-12 21:34:40
【问题描述】：

我将开始说明我的问题。

正如您所看到的，我有一个容器，其中包含许多立方体元素，它们都向左浮动。但我遇到的问题是我无法将它们放在第二个容器中。绿线表示容器中有一个空白区域，因为元素浮动到左侧。但我希望那个空间不存在，或者以某种方式在容器的左侧也有一个相同大小的空间。总结一下，我想要那个居中。我尝试过 flexbox，但只有上部容器居中，它仍然不是 100% 居中。我怀疑这是因为每个立方体都有一个像素大小，但我不知道如何使用其他方法。

这是小提琴的链接以及我当前代码的外观

https://jsfiddle.net/qajyzkhu/3/

    <div class="calendar-container">
  <div class="fieldsContainer">


    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>



  </div>
</div>

css

    .calendar-container{
   background-color:rgb(151,203,228);
    height:100vh;
    overflow: scroll;
    overflow-x: hidden;
    display:flex;
    justify-content: center;
}

.fieldsContainer{
   width:90%;   
}

.cube-lived{
    float: left;
    width: 19px;
    height: 19px;
    border: 1px solid rgba(0, 0, 0, .2);
    margin: 1px;
    background-color: rgba(6,30,57);
  }

【问题讨论】：

相关（很可能是重复的）stackoverflow.com/q/42176419/8620333
@TemaniAfif 谢谢，用网格找到了答案stackoverflow.com/questions/44154580/…
我的回答也解决了你的问题吗？
@Chryfi 我尝试将 margin-left 和 right 添加到 auto 中，但它没有修复它

标签： html css flexbox css-float

【解决方案1】：

用这个 css 修复它

    .calendar-container{
   background-color:rgb(151,203,228);
    height:100vh;
    overflow: scroll;
    overflow-x: hidden;
    display:flex;
    justify-content: center;
}

.fieldsContainer{
  width:90%;   
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20px, 1fr));
  grid-auto-rows: 20px;

}

.cube-lived{
    float: left;
    border: 1px solid rgba(0, 0, 0, .2);
    margin: 1px;
    background-color: rgba(6,30,57);
  }

【讨论】：

【解决方案2】：

尝试使用css网格

display: grid;

.fieldsContainer{
   width:90%;   

   display: grid;
   grid-template-columns: repeat(auto-fit, 20px);
   grid-gap: 1px;
}

.cube-lived {
    background-color: rgba(6,30,57);
    height: 20px;
    width: 20px;
  }

【讨论】：