fix(create-next-app): starter styling errors (#28096)

Fixes #27770.

Projects initialized with `create-next-app` should not only be totally functional in terms of styling, but ideally there would be as minimal CSS as possible to serve as a "jumping off point" for users (related: #24709, where I initially proposed this fix).

However, minor issues with the specific styling approaches in the template created by `create-next-app` break the page for small viewports. This is caused by an improper use of `display: flex` in conjunction with `min-height: 100vh` on the `.container` class, and I imagine it places a drag on the initial user experience due to the fact that every user who creates a project with `create-next-app` must *independently fix* this viewport sizing issue themselves.

For example, the top of the viewport on a small display (here, iPhone SE):

![image](https://user-images.githubusercontent.com/1657236/129430078-229d5fab-b719-458c-8a94-10fb8be3490d.png)

Notice the "Welcome to Next.js" message is missing: Its container is larger than the viewport, and is set to be a flex column with `justify-center`—so we are staring at the center of the container. To demonstrate better, here is the full page render for before and after this PR:

![image](https://user-images.githubusercontent.com/1657236/129430409-52134198-651a-4cf8-915d-68b699febd77.png)

This PR adjusts the styling to fix this issue, and also other styling issues on small screens, like grid width issues causing text to overflow (and the footer padding as seen above):

![image](https://user-images.githubusercontent.com/1657236/129430114-1dda7674-3b02-45d4-a4b3-37fc5053c6c4.png)

After these changes, and minor padding tweaks, this is the top of the viewport on an iPhone X (full render above):

![image](https://user-images.githubusercontent.com/1657236/129430224-1991c1a6-8c7e-4246-b4a5-44919fb850c6.png)

And on an iPhone SE:

![image](https://user-images.githubusercontent.com/1657236/129430259-4408c52f-6fc6-4f22-9cc6-bbdbbe8d7a1a.png)

packages/create-next-app/templates/default/styles/Home.module.css

@@ -1,15 +1,10 @@
 .container {
-  min-height: 100vh;
-  padding: 0 0.5rem;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  height: 100vh;
+  padding: 0 2rem;
 }
 
 .main {
-  padding: 5rem 0;
+  min-height: 100vh;
+  padding: 4rem 0;
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -18,10 +13,10 @@
 }
 
 .footer {
-  width: 100%;
-  height: 100px;
-  border-top: 1px solid #eaeaea;
   display: flex;
+  flex: 1;
+  padding: 2rem 0;
+  border-top: 1px solid #eaeaea;
   justify-content: center;
   align-items: center;
 }
@@ -56,6 +51,7 @@
 }
 
 .description {
+  margin: 4rem 0;
   line-height: 1.5;
   font-size: 1.5rem;
 }
@@ -75,7 +71,6 @@
   justify-content: center;
   flex-wrap: wrap;
   max-width: 800px;
-  margin-top: 3rem;
 }
 
 .card {
@@ -87,7 +82,7 @@
   border: 1px solid #eaeaea;
   border-radius: 10px;
   transition: color 0.15s ease, border-color 0.15s ease;
-  width: 45%;
+  max-width: 300px;
 }
 
 .card:hover,

packages/create-next-app/templates/typescript/styles/Home.module.css

@@ -1,15 +1,10 @@
 .container {
-  min-height: 100vh;
-  padding: 0 0.5rem;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  height: 100vh;
+  padding: 0 2rem;
 }
 
 .main {
-  padding: 5rem 0;
+  min-height: 100vh;
+  padding: 4rem 0;
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -18,10 +13,10 @@
 }
 
 .footer {
-  width: 100%;
-  height: 100px;
-  border-top: 1px solid #eaeaea;
   display: flex;
+  flex: 1;
+  padding: 2rem 0;
+  border-top: 1px solid #eaeaea;
   justify-content: center;
   align-items: center;
 }
@@ -56,6 +51,7 @@
 }
 
 .description {
+  margin: 4rem 0;
   line-height: 1.5;
   font-size: 1.5rem;
 }
@@ -75,7 +71,6 @@
   justify-content: center;
   flex-wrap: wrap;
   max-width: 800px;
-  margin-top: 3rem;
 }
 
 .card {
@@ -87,7 +82,7 @@
   border: 1px solid #eaeaea;
   border-radius: 10px;
   transition: color 0.15s ease, border-color 0.15s ease;
-  width: 45%;
+  max-width: 300px;
 }
 
 .card:hover,