Remove unintentional right-margin on last odd-item. (#12199)

* Remove unintentional right-margin on last odd-item.

Looks like it wasn't intended to for the last column to have a `right-margin`, but the `:not(:last-child)` used here would only "not add" the margin. It didn't remove it if the column was odd numbered.

This simplifies the logic and adds right and left margin to all columns but removes it from first-left and last-right.

I also replaced the `flex: 1;` property with `flex-grow: 1;`. 
`flex: 1` is = to `flex-grow: 1; flex-shrink: 1; flex-basis: 0;`
In this case `flex-shrink` keeps it's default value of `1` and `flex-basis` overwritten and is set to `100%` a couple lines after. So `flex-grow` is all we need.

* update editor to match style.css column margin changes

* account for beginning and end margins with breakpoints

* update editor.css to match style.css

* account for editor block padding and the medium breakpoint

* remove whitespace

* account for negative margins added by the editor

* correct flex-basis calculation for column width

packages/block-library/src/columns/editor.scss

@@ -35,7 +35,7 @@
 		// Responsiveness: Allow wrapping on mobile.
 		flex-wrap: wrap;
 
-		@include break-small() {
+		@include break-medium() {
 			flex-wrap: nowrap;
 		}
 
@@ -89,29 +89,23 @@
 
 			// Beyond mobile, allow 2 columns.
 			@include break-small() {
-				flex-basis: 50%;
+				flex-basis: calc(50% - (#{$grid-size-large} + #{$block-padding * 2}));
 				flex-grow: 0;
 			}
 
 			// Add space between columns. Themes can customize this if they wish to work differently.
 			// This has to match the same padding applied in style.scss.
 			// Only apply this beyond the mobile breakpoint, as there's only a single column on mobile.
 			@include break-small() {
-				&:nth-child(odd) {
-					margin-right: $grid-size-large * 2;
-				}
 				&:nth-child(even) {
-					margin-left: $grid-size-large * 2;
+					margin-left: calc(#{$grid-size-large * 2} + #{$block-padding});
 				}
 			}
 
-			@include break-small() {
+			// When columns are in a single row, add space before all except the first.
+			@include break-medium() {
 				&:not(:first-child) {
-					margin-left: $grid-size-large * 2;
-				}
-
-				&:not(:last-child) {
-					margin-right: $grid-size-large * 2;
+					margin-left: calc(#{$grid-size-large * 2} + #{$block-padding});
 				}
 			}
 		}

packages/block-library/src/columns/style.scss

@@ -10,41 +10,37 @@
 }
 
 .wp-block-column {
-	flex: 1;
+	flex-grow: 1;
 	margin-bottom: 1em;
 
 	// Responsiveness: Show at most one columns on mobile.
 	flex-basis: 100%;
 
-	// Beyond mobile, allow 2 columns.
-	@include break-small() {
-		flex-basis: 50%;
-		flex-grow: 0;
-	}
-
 	// Prevent the columns from growing wider than their distributed sizes.
 	min-width: 0;
 
 	// Prevent long unbroken words from overflowing.
 	word-break: break-word; // For back-compat.
 	overflow-wrap: break-word; // New standard.
 
-	// Add space between columns. Themes can customize this if they wish to work differently.
-	// Only apply this beyond the mobile breakpoint, as there's only a single column on mobile.
 	@include break-small() {
-		&:nth-child(odd) {
-			margin-right: $grid-size-large * 2;
-		}
+
+		// Beyond mobile, allow 2 columns.
+		flex-basis: calc(50% - #{$grid-size-large});
+		flex-grow: 0;
+
+		// Add space between the 2 columns. Themes can customize this if they wish to work differently.
+		// Only apply this beyond the mobile breakpoint, as there's only a single column on mobile.
 		&:nth-child(even) {
 			margin-left: $grid-size-large * 2;
 		}
+	}
+
+	@include break-medium() {
 
+		// When columns are in a single row, add space before all except the first.
 		&:not(:first-child) {
 			margin-left: $grid-size-large * 2;
 		}
-
-		&:not(:last-child) {
-			margin-right: $grid-size-large * 2;
-		}
 	}
 }