Added CSS

src/Header/DropdownMenu.js

@@ -1,12 +1,13 @@
 import { useNavigate } from "react-router-dom";
+import "./Header.css";
 
 const DropdownMenu = () => {
   const navigate = useNavigate();
 
   return (
     <div>
-      <button type = "button" onClick = {() => navigate('/JoinTheClub')}>Join the Club</button>
+      <button className='navigateButton' type = "button" onClick = {() => navigate('/JoinTheClub')}>Join the Club</button>
-      <button type = "button" onClick = {() => navigate('/UpcomingEvents')}>Upcoming Events</button>
+      <button className='navigateButton' type = "button" onClick = {() => navigate('/UpcomingEvents')}>Upcoming Events</button>
     </div>
   );
 };

src/Header/Header.css

@@ -0,0 +1,24 @@
+header {
+    display: flex;
+    flex-direction: column;
+    margin: 1%;
+    margin-top: 0%;
+}
+
+.banner {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    background-color: aqua;
+}
+
+.logo {
+    width: 10%;
+    height: 10%;
+    background-color: white;
+}
+
+#title {
+    background-color: blueviolet;
+}

src/Header/Header.js

@@ -20,23 +20,24 @@ export default function Header() {
     return (
         <>
             <header>
-                <div>
+                <div className='banner'>
-                    <img onClick = {() => navigate('/')} src={logo} alt="logo" />
+                    <img className='logo' onClick = {() => navigate('/')} src={logo} alt="logo" />
-                    <p>Schulich Offroad</p>
+                    <p id='title'>Schulich Offroad</p>
                 </div>
-                <div>
+                <div className='navigationBar'>
-                    <button type = "button" onClick = {() => navigate('/')}>About Us</button>
+                    <button className='navigateButton' type = "button" onClick = {() => navigate('/')}>About Us</button>
-                    <button type = "button" onClick = {() => navigate('/Teams')}>Teams</button>
+                    <button className='navigateButton' type = "button" onClick = {() => navigate('/Teams')}>Teams</button>
-                    <button type = "button" onClick = {() => navigate('/OurSponsors')}>Our Sponsors</button>
+                    <button className='navigateButton' type = "button" onClick = {() => navigate('/OurSponsors')}>Our Sponsors</button>
-                    <button type = "button" onClick = {() => navigate('/BecomeASponsor')}>Become a Sponsor</button>
+                    <button className='navigateButton' type = "button" onClick = {() => navigate('/BecomeASponsor')}>Become a Sponsor</button>
                     <div
+                    className='dropDown'
                     onMouseEnter={handleMouseEnter}
                     onMouseLeave={handleMouseLeave}
                     >
-                        <button type = "button">Club Membership & Upcoming Events</button>
+                        <button className='navigateButton' type = "button">Club Membership & Upcoming Events</button>
                         {isDropdownVisible && <DropdownMenu />}
                     </div>
-                    <button type = "button" onClick = {() => navigate('/Gallery')}>Gallery</button>
+                    <button className='navigateButton' type = "button" onClick = {() => navigate('/Gallery')}>Gallery</button>
                 </div>
             </header>
             <Outlet />