push

src/Quiz.css

+.Main {
+    background: orange;
+    display: inline-block;
+    border: 3px solid black;
+    width: 200px;
+    text-align: center;
+}
+
+/* .Name {} */
+
+.Box {
+    text-align: center;
+    margin: 0 auto;
+}
+
+.QuizStart {
+    margin: 30px;
+    margin-left: 500px;
+    width: 150px;
+    height: 30px;
+    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
+}
\ No newline at end of file

src/Quiz.js

 import React from 'react';
 // import logo from './logo.svg';
-// import './App.css';
+import './Quiz.css';
 
 
 const question = [
@@ -40,7 +40,7 @@ class Quiz extends React.Component {
       }
       else {
         return (
-          <div className="quiz">
+          <div className="Quiz">
             <h2>Q:{this.state.Q}</h2>
             <div>
               <input type="text" value={this.state.v} name="A" onChange={this.setAnswer} />
@@ -52,16 +52,16 @@ class Quiz extends React.Component {
     }
     else {
       return (
-        <>
-          <div className="App">
-            <h1 style={{ background: "orange", display: "inline-block", border: "3px solid black", width: "200px" }}> Calculus</h1>
+        <div className="Box">
+          <div className="Main">
+            <h1> Calculus</h1>
           </div>
-          <div className="App">
+          <div className="Name">
             이름을 입력하세요
           <input onChange={(event) => { console.log(event.target.value) }} />
           </div>
-          <button onClick={this.ShowQuiz1} style={{ margin: "30px", marginLeft: "690px", width: "150px", height: "30px", fontFamily: "impact" }}>Quiz Start !</button>
-        </>
+          <button className="QuizStart" onClick={this.ShowQuiz1}>Quiz Start !</button>
+        </div>
 
       )
     }