Fix site width

src/components/Footer/Footer.component.tsx

@@ -4,7 +4,7 @@
  * @returns {JSX.Element} - Rendered component
  */
 const Footer = () => (
-  <footer className="bg-white mb-4 hidden md:block px-4">
+  <footer className="bg-white mb-2 hidden md:block px-4 mt-[5rem]">
     <div className="container flex md:flex-wrap flex-col md:flex-row items-center justify-between px-6 py-3 mx-auto mt-0 md:min-w-96 border border-gray-200 rounded">
       <div className="text-gray-600 mx-auto">
         &copy; {new Date().getFullYear()} Daniel / w3bdesign

src/components/Index/Hero.component.tsx

@@ -6,7 +6,7 @@
 const Hero = () => (
   <section
     id="hero"
-    className="flex w-full mx-auto bg-right bg-cover mt-14 md:pt-0 md:items-center bg-hero-background h-[24rem]"
+    className="flex w-full mx-auto bg-right bg-cover mt-14 md:pt-0 md:items-center bg-hero-background h-[24rem] lg:max-w-[1490px]"
   >
     <div className="container mx-auto">
       <div className="flex flex-col items-start justify-center w-full px-6 tracking-wide lg:w-1/2">

src/components/Layout/Layout.component.tsx

@@ -56,14 +56,16 @@ const Layout = ({ children, title }: ILayoutProps) => {
   }, [refetch]);
 
   return (
-    <div className="flex flex-col min-h-screen container min-w-[140vw] md:min-w-[700px] md:px-[2.5rem] md:py-[1rem]">
-      <Header title={title} />
-      <PageTitle title={title} />
-      <main className="flex-grow">
-        {children}
-      </main>
-      <Footer />
-      <Stickynav />
+    <div className="flex flex-col min-h-screen w-full mx-auto">
+      <div className="container min-w-[140vw] sm:min-w-[100vw] md:px-4 lg:px-6 py-2 lg:max-w-[1600px] mx-auto">
+        <Header title={title} />
+        <PageTitle title={title} />
+        <main className="flex-grow">
+          {children}
+        </main>
+        <Footer />
+        <Stickynav />
+      </div>
     </div>
   );
 };