Refactor the css layout to use grid and flex

Remove #primary

Remove #primary, take 2

Change primary layout module to CSS grid.

Remove ::before / ::after based clearfixes. When using flex and grid, pseudo-elements are considered flex/grid elements and cause unexpected behavior. Clearfix is a tool to resolve clearing when using float-based layouts. Modern flex/grid-based layouts do not need them.

Main menu: Use flex as layout module.

Main menu cleanup.

Comments, Posts, and Post Navigation: Use flex for layout. Automatic RTL.

Remove errant test data.

- Fixed skip to content link to point to main content (#primary).
- Changed ID for <main> to #primary to preserve original separation between main and sidebar (#secondary).
- Removed superfluous ID reference to #secondary in CSS.
- Cleaned up whitespace triggering Travis errors.

Fix wpcs issues

Cleaning the rebase

Compile CSS

Remove primary div from WooCommerce too

grid-template-columns property doesn't support negative values

sass/shop/_components.scss

@@ -6,8 +6,6 @@
 	margin: 0;
 	padding: 0;
 
-	@include clearfix;
-
 	.cart-contents {
 		text-decoration: none;
 	}
@@ -226,8 +224,6 @@ p.stars {
 .woocommerce-error,
 .woocommerce-noreviews,
 p.no-comments {
-
-	@include clearfix;
 	background-color: $woocommerce__color-success;
 	clear: both;
 }

sass/shop/_products.scss

@@ -1,6 +1,4 @@
 ul.products {
-
-	@include clearfix;
 	margin: 0;
 	padding: 0;
 

sass/shop/_single-product.scss

@@ -1,8 +1,6 @@
 .single-product {
 
 	div.product {
-
-		@include clearfix;
 		position: relative;
 
 		.woocommerce-product-gallery {
@@ -22,8 +20,6 @@
 			}
 
 			.flex-control-thumbs {
-
-				@include clearfix;
 				margin: 0;
 				padding: 0;