[EDIT]CSS

react-whenMeet/package.json

@@ -19,7 +19,7 @@
     "web-vitals": "^2.1.4"
   },
   "scripts": {
-    "start": "export PORT=3001 && react-scripts start",
+    "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"

react-whenMeet/src/components/HomeMakeForm.js

@@ -18,14 +18,14 @@ function HomeMakeForm() {
 
     const handleSubmit = (event) => {
         event.preventDefault();
-        navigate("/MeetingInfo", {state : {title, password}});
+        navigate("/MeetingInfo", { state: { title, password } });
     };
     const isFormValid = title.trim() !== "" && password.trim() !== "";
 
     return (
         <form onSubmit={handleSubmit}>
-            <div className="system-name">언제모임?</div>
             <div className="center-container">
+                <div className="system-name">언제모임?</div>
                 <h1>원하는 약속을 만들어보세요</h1>
                 <Input
                     type="text"

react-whenMeet/src/components/HomeParticipateForm.js

@@ -187,7 +187,7 @@ function HomeParticipateForm() {
     <form>
       <div>
         <h1>투표에 참여하기</h1>
-        <h2> 아이디가 없다면 아래 양식에 맞춰 작성 후 참여하기를 누르세요</h2>
+        <h2 className="h2"> 아이디가 없다면 아래 양식에 맞춰 작성 후 참여하기를 누르세요</h2>
         <Input
           type="text"
           value={name}

react-whenMeet/src/components/MeetingInfoForm.js

@@ -90,7 +90,7 @@ function MeetingInfoForm() {
   };
   return (
     <form onSubmit={handleSubmit}>
-      <div className="center-container">
+      <div className="center-container2">
         <h1>약속 일정 만들기</h1>
         <div className="purpose">
           <h2 className="not-enter">약속 목적 </h2>

react-whenMeet/src/routes/MeetingInfo.js

@@ -4,7 +4,7 @@ import '../styles/MeetingInfo.css'
 function MeetingInfo() {
     
     return (
-        <div className="center-container">
+        <div>
             <MeetingInfoForm />
         </div>
     );

react-whenMeet/src/routes/UserTimeInfo.js

@@ -194,7 +194,7 @@ function UserTimeInfo() {
   };
 
   return (
-    <div className="center-container">
+    <div className="center-container2">
       <div className="calendarForm">
         <div className="cc1">
           <button

react-whenMeet/src/styles/HomeMake.css

@@ -27,9 +27,10 @@ h1 {
 
 .center-container {
   display: flex;
-  flex-direction: column; /* 세로 방향으로 정렬 */
+  flex-direction: column;
   align-items: center;
-  height: 100vh;
+  justify-content: center; /* Add this line to center vertically */
+  min-height: 100vh;
 }
 
 input {

react-whenMeet/src/styles/HomeParticipateForm.css

-h2 {
+h2.h2{
     font-size: 12px;
     font-weight: lighter;
 }
\ No newline at end of file

react-whenMeet/src/styles/MeetingInfo.css

@@ -9,7 +9,7 @@ body {
   padding: 0px;
 }
 
-.center-container {
+.center-container2 {
   display: flex;
   flex-direction: column; /* 세로 방향으로 정렬 */
   align-items: center;

react-whenMeet/src/styles/UserTimeInfo.css

@@ -4,7 +4,7 @@
   padding: 20px;
   text-align: center;
   align-items: stretch;
-  width: auto;
+  width: 40%;
   margin: 0 auto; /* 가운데 정렬을 위한 추가 */
 }
 .calendarForm .calendar {