I have the following code below that focuses on table display.

```css
* {
  box-sizing: border-box;
}

.mother {
  width: 300px;
  margin: 2em auto;
  background: peachpuff;
  display: table;
}

.child {
  display: inline-table;
  width: 100px;
  height: 100px;
  background: cyan;
  border: 1px solid #7a7a7a;
}
```

```html
<div class="mother">
  <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>
```

My problem is that the child boxes (`.child`) are not totally wrapped, leaving some little whitespaces. The question is, is it because of `display: table` or `display: inline-table`? If yes, what `display` value(s) should I use to prevent leaving whitespaces?

My another concern is, when I change the `display` value of `.mother` to `table` and `.child` to `table-cell`, the children elements fits themselves no matter the width of the parent element. For example, if the `.mother` has a width of 300px and each children is 100px wide, each row is supposed to contain only 3 child elements to perfectly fit the length of the parent element. With `display: flex`, it can be solved with `flex-wrap`. What property should I use in this problem?