Fix margins

theodoretnguyen · Feb 8, 2023 · 8b49ca0 · 8b49ca0
1 parent c1cb65e
commit 8b49ca0
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 35 deletions.
diff --git a/app.css b/app.css
@@ -8,13 +8,34 @@ main {
   max-width: 75%;
 }
 
+#flex_container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+}
+
 h1 {
+  font-size: 25pt;
+}
+
+td {
   text-align: center;
-  font-size: 20pt;
 }
 
-p {
-  font-size: 14pt;
+img {
+  max-width: 40%;
+  height: auto;
+}
+
+#img_bg6 {
+  border: 2px solid #eb1c24;
+  border-radius: 12px;
+}
+
+#img_io {
+  border: 2px solid #6b80e9;
+  border-radius: 12px;
 }
 
 figcaption {
@@ -27,24 +48,22 @@ figcaption {
   background-color: #fefee3;
 }
 
-img {
-  max-width: 40%;
-  height: auto;
+#red {
+  color: red;
+  background-color: #fefee3;
 }
 
-#img_bg6 {
-  border: 2px solid #eb1c24;
-  border-radius: 12px;
+#blue {
+  color: blue;
+  background-color: #fefee3;
 }
 
-#img_io {
-  border: 2px solid #6b80e9;
-  border-radius: 12px;
+p {
+  font-size: 14pt;
 }
 
 input {
   padding: 16px 32px;
-  text-align: center;
   text-decoration: none;
   display: inline-block;
   font-size: 16pt;
@@ -101,21 +120,6 @@ input {
   color: black;
 }
 
-td {
-  text-align: center;
-  display:flexbox;
-}
-
 .counter {
   font-size: 40pt;
 }
-
-#red {
-  color: red;
-  background-color: #fefee3;
-}
-
-#blue {
-  color: blue;
-  background-color: #fefee3;
-}
diff --git a/index.html b/index.html
@@ -13,11 +13,11 @@
 
   <body>
     <header>
-      <h1>Movie Theater Equations</h1>
     </header>
 
     <main>
-      <div style="text-align:center;">
+      <div id="flex_container">
+        <h1>Movie Theater Equations</h1>
         <table>
           <thead>
             <tr>
@@ -27,7 +27,7 @@ <h1>Movie Theater Equations</h1>
                   <figcaption>
                     Ticket Price:
                     <br>
-                      3 <span id="red">red</span> tokens,
+                      3 <span id="red">red</span> tokens
                     <br>
                       2 <span id="blue">blue</span> tokens
                   </figcaption>
@@ -39,7 +39,7 @@ <h1>Movie Theater Equations</h1>
                   <figcaption>
                     Ticket Price:
                     <br>
-                      2 <span id="red">red</span> tokens,
+                      2 <span id="red">red</span> tokens
                     <br>
                       3 <span id="blue">blue</span> tokens
                   </figcaption>
@@ -94,9 +94,10 @@ <h1>Movie Theater Equations</h1>
             </tr>
           </tbody>
         </table>
-        <input type="button" id="button_rev" value="Click to show revenues">
-        <br>
-        <input type="button" id="button_reset" value="Reset">
+        <div>
+          <input type="button" id="button_rev" value="Click to show revenues">
+          <input type="button" id="button_reset" value="Reset">
+        </div>
       </div>
     </main>