CSS unable to center big amount of float:left elements

Question

I will begin illustrating my problem.

As you can observe I have a container, containing a lot of cube elements, they are all floated left. But the problem I have is that I cant center them inside the second container. The green line marks a blank space that there is in the container because the elements are floated to the left. But I want that space to not exist, or to somehow have one of the same size in the left of the container too. Summarizing I want that centered. I have tried flexbox but only the upper container is being centered, its still not a 100% centering. I suspect that its because each cube has a pixel size, but I dont know how to do it with other methods.

This is the link of the fiddle and how my current code looks

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

related (most probably a duplicate) https://stackoverflow.com/q/42176419/8620333 — Temani Afif, Apr 12 '20 at 11:45
@TemaniAfif thanks, found the answer with grid there https://stackoverflow.com/questions/44154580/equal-width-flex-items-even-after-they-wrap — mouchin777, Apr 12 '20 at 11:51
@Chryfi I tried adding margin-left and right to auto, and it didnt fix it — mouchin777, Apr 12 '20 at 12:01

score 0 · Accepted Answer · answered Apr 12 '20 at 11:53

fixed it with this 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);
  }

score 0 · Answer 2 · answered Apr 12 '20 at 12:23

0

Try using css grid

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

answered Apr 12 '20 at 12:23

Brendan Farquharson

92
3

CSS unable to center big amount of float:left elements

2 Answers2