Struggling to center a button ;-;

Author: Jenpj234

views/js/evently/src/HostList.css

@@ -5,7 +5,7 @@ body {
 
 .header {
   display: flex;
-  justify-content: space-between;
+  justify-content:center;
   align-items: center;
   padding: 20px;
   border-bottom: 2px solid #f5f5f5;
@@ -24,6 +24,8 @@ body {
   border: none;
   border-radius: 5px;
   text-decoration: none;
+  margin: 0 auto;
+  display: block;
 }
 
 .host-button:hover {
@@ -32,7 +34,7 @@ body {
 
 table {
   width: 100%;
-  margin: 20px 0;
+  margin: 0;
   border-collapse: collapse;
 }
 

views/js/evently/src/HostList.jsx

@@ -29,12 +29,14 @@ function HostList() {
   return (
     <div className="all-hosts-container">
       <div className="header">
-        <h1>All Hosts</h1>
-        <Link to="/create-host" className="host-button">
-          Create Host
-        </Link>
+        <h1>Discover New People</h1>
+       
       </div>
 
+      <Link to="/create-host" className="host-button">
+          Join now
+        </Link>
+
       <table>
         <thead>
           <tr>