update for mobile nav

Author: jonhealy1

src/components/Header.js

@@ -10,15 +10,15 @@ const Header = () => {
       {/* Gradient Background for the Logo and Navigation */}
       <div
         id="home"
-        className="bg-gradient-to-b from-gray-400 to-gray-300 w-full py-24"
+        className="bg-gradient-to-b from-gray-400 to-gray-300 w-full py-24 overflow-x-hidden"
       >
         <div className="max-w-screen-xl mx-auto px-4 flex flex-col sm:flex-row items-center sm:justify-between">
           {/* Logo and Tagline */}
           <div className="flex flex-col items-center sm:items-start">
             <img
               src={logo}
               alt="StacChain Logo"
-              className="scale-150 sm:scale-150 h-28 sm:h-36 md:h-48 mb-4 ml-0 sm:ml-24 mt-12 max-w-full"
+              className="scale-150 sm:scale-150 h-28 sm:h-36 md:h-48 mb-4 ml-0 sm:ml-24 mt-12 max-w-full mx-auto sm:mx-0"
             />
           </div>
 

src/components/Navbar.js

@@ -31,7 +31,10 @@ const Navbar = () => {
         <div className="flex justify-between items-center h-16">
           {/* Logo */}
           <div className="flex-shrink-0">
-            <a href="/" className="text-4xl font-bold font-comfortaa">
+            <a
+              href="/"
+              className="text-2xl sm:text-4xl font-bold font-comfortaa"
+            >
               <span>stac</span>
               <span className="text-white">chain</span>
             </a>