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/navigation/_menus.scss

@@ -1,7 +1,5 @@
 .main-navigation {
-	clear: both;
 	display: block;
-	float: left;
 	width: 100%;
 
 	ul {
@@ -27,7 +25,8 @@
 
 				&:hover > ul,
 				&.focus > ul {
-					left: 100%;
+					display: block;
+					left: auto;
 				}
 			}
 
@@ -51,7 +50,6 @@
 	}
 
 	li {
-		float: left;
 		position: relative;
 
 		&:hover > a,
@@ -84,7 +82,7 @@
 	}
 
 	.main-navigation ul {
-		display: block;
+		display: flex;
 	}
 }
 
@@ -94,17 +92,18 @@
 
 	.site-main & {
 		margin: 0 0 1.5em;
-		overflow: hidden;
+	}
+
+	.nav-links {
+		display: flex;
 	}
 
 	.nav-previous {
-		float: left;
-		width: 50%;
+		flex: 1 0 50%;
 	}
 
 	.nav-next {
-		float: right;
-		text-align: right;
-		width: 50%;
+		text-align: end;
+		flex: 1 0 50%;
 	}
 }