JSFiddle - React, Tailwind, and code Playground

HTML

<div class="centered">
  <div class="container">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>

CSS

.centered {
  text-align: center;
}

.container {
  background: red;
  padding: 10px;
  display: inline-block;
}

.child {
  width: 100px;
  height: 100px;
  float: left;
}

.child:nth-child(even) {
  background: green;
}

.child:nth-child(odd) {
  background: blue;
}

JavaScript

$(window).on("resize", function() {
  var height = $('.child').first().height();
  var width = 0;
  
  var outerContainerWidth = $(".centered").width();
  var innerContainerWidth = Math.floor(outerContainerWidth/100) * 100;

  $('.container').css('width', innerContainerWidth)
}).resize();