CORE/COLUMNS fix margins on med screens, and odd numbers of cols

[drdogbot7]

Background

There should be 3 breakpoints:

Mobile: less than 600px
all columns full width and stacked. No margins.

Small: 600px - 782px
columns wrap in rows of 2. Margins on the inside.

Medium: bigger than 782px
all columns fit in one row. Margins on the inside.

PROBLEMS!

PROBLEM 1
Columns don't wrap properly at Small breakpoint

SOLUTION

• move not selectors to Medium breakpoint
• adjust flex-basis to account for margins using calc()

PROBLEM 2
At the Medium breakpoint, when there is an odd number of columns, and extra margin is added to the last item.

SOLUTION

• reset odd and even selectors to initial at the Medium breakpoint

How has this been tested?

tested in local wordpress docker env, codepen.

ORIG:
https://codepen.io/drdogbot7/pen/NEOQPQ

FIX:
https://codepen.io/drdogbot7/pen/GwYVNz

Types of changes

Only css affecting core/columns.

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.

[drdogbot7]

updated to fix formatting, add additional explanatory comments.

[IvanPr]

The Wordpress 5.1 is out but this issue still remains...

[drdogbot7]

The Wordpress 5.1 is out but this issue still remains...

I believe the fix (not this PR) is going to be in 5.2