UserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.117 Safari/537.36

Steps to reproduce the problem:
0. see the examples below at at least ~900px viewport or...
1. Create parent element A which has a odd or even width (odd to see the problem, even to see correct behaviour).
2. Create a children B, which has a flex/grid/inline-block/... based layout with X items, where B width isn't divisible by X and is smaller, then A's width.
3. Center B using margin.
4. See the render difference between odd/even width of A:
  - 4.1. Correct behaviour https://codepen.io/zipper/pen/mLyMpp
  - 4.2. Incorrect behaviour https://codepen.io/zipper/pen/bMNreM

What is the expected behavior?
Children items should fill the entire space regardless of A width (since B width is still the same) and there should be no background bleed from parent.

What went wrong?
There is a background bleed from parent container B, when A's width is odd. When B centering using margin is removed, background bleed disappears. FireFox and MS Edge cope with this well, Safari has the same bug.

Did this work before? N/A 

Does this work in other browsers? N/A

Chrome version: 66.0.3359.117  Channel: stable
OS Version: 10.0
Flash Version: