Centers page title with CSS

package.json

@@ -11,6 +11,7 @@
     "react": "^17.0.2",
     "react-bootstrap": "^1.5.2",
     "react-dom": "^17.0.2",
+    "react-google-login": "^5.2.2",
     "react-hook-form": "^7.4.1",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",

src/component/Header.jsx

@@ -4,12 +4,12 @@ import Search from "./Search";
 import ".././styles/Header.css"
 import LogoutButton from "./session/LogoutButton";
 
-const Header = ({login, setLogin}) => {
+const Header = ({ login, setLogin }) => {
   const [show, setShow] = useState(false);
 
   return (
     <nav className="navbar navbar-expand-lg navbar-dark">
-      <div className="container-fluid">
+      <div id="parent" className="container-fluid">
         <Link className="navbar-brand" to="/">
           Ascend
         </Link>
@@ -30,7 +30,7 @@ const Header = ({login, setLogin}) => {
           id="navbarSupportedContent"
         >
           <ul className="navbar-nav me-auto mb-2 mb-lg-0">
-            <li className="nav-item" style={{color: "red"}}>
+            <li className="nav-item">
               <Link className="nav-link" to="/products">
                 Products
               </Link>
@@ -41,11 +41,8 @@ const Header = ({login, setLogin}) => {
               </Link>
             </li>
           </ul>
-          <div id="page-title" className="nav-item mx-auto"> <h1>Inventory, Promotions, Pricing</h1>
-          </div>
-
-     
-        <LogoutButton/>
+          <h1 id="page-title">Inventory, Promotions, Pricing</h1>
+          <LogoutButton />
         </div>
       </div>
     </nav>

src/component/session/LoginButton.jsx

@@ -32,6 +32,7 @@ function LoginButton({}){
                 onSuccess= {onSuccessLogin}
                 onFailure= {onFailure}
                 cookiePolicy={'single_host_origin'}
+                isSignedIn={true}
             />
             </div>
         </div>

src/styles/Header.css

@@ -3,5 +3,26 @@
 }
 
 #page-title{
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: auto;
+    margin-bottom: auto;
+    left: 0;
+    right: 0;
     color: #EBEBEB;
+    pointer-events: none;
+}
+
+#navbarSupportedContent{
+    position: relative;
+}
+
+.nav-link{
+    color: #EBEBEB !important;
+}
+
+.nav-link:hover{
+    color: #CCCDCF !important;
 }
\ No newline at end of file