Simplify boilerplate css

src/App.css

@@ -1,7 +1,5 @@
 .App {
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
+  text-align: center;
 }
 
 .App-logo {
@@ -10,20 +8,14 @@
 }
 
 .App-header {
-  align-items: center;
   background-color: #222;
-  color: #fff;
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  justify-content: center;
+  height: 150px;
+  padding: 20px;
+  color: white;
 }
 
 .App-intro {
-  flex: 7;
   font-size: large;
-  padding: 50px;
-  text-align: center;
 }
 
 @keyframes spin {

src/App.js

@@ -7,7 +7,7 @@ export default function App() {
     <div className="App">
       <div className="App-header">
         <img src={logo} className="App-logo" alt="logo" />
-        <h2>Welcome to React.</h2>
+        <h2>Welcome to React</h2>
       </div>
       <p className="App-intro">
         To get started, edit <code>src/App.js</code> and save to reload.