fixing things with the responsiveness

packages/web/components/footer/index.tsx

@@ -12,8 +12,8 @@ export default function Footer() {
   }, []);
 
   return (
-    <div className="container mx-auto max-w-screen-lg flex md:flex-row flex-col justify-between mt-auto items-center">
+    <div className="container mx-auto max-w-screen-xl flex md:flex-row flex-col justify-between mt-auto items-center">
-      <span className="ml-20">
+      <span>
         <span className="text-zinc-400 text-sm">Wanna chat? </span>
         <span
           className="font-bold text-white cursor-pointer"

packages/web/components/header/index.tsx

@@ -3,7 +3,7 @@ import { LogoType } from "@nirvana/components/logo/full";
 
 export default function Header() {
   return (
-    <div className="container mx-auto max-w-screen-lg px-10 pt-5 flex flex-row justify-center md:justify-start">
+    <div className="container mx-auto max-w-screen-xl px-10 pt-5 flex flex-row justify-center md:justify-start">
       <HorizontalLogo type={LogoType.small} />
     </div>
   );

packages/web/pages/_app.tsx

@@ -26,7 +26,7 @@ function MyApp({ Component, pageProps }: AppProps) {
         />
       </Head>
 
-      <main className="min-h-screen min-w-screen bg-zinc-700 flex flex-col">
+      <main className="min-h-screen bg-zinc-700 flex flex-col">
         <Component {...pageProps} />
       </main>
 

packages/web/pages/index.tsx

@@ -13,7 +13,7 @@ const Home: NextPage = () => {
       <Header />
 
       {/* above fold experience */}
-      <div className="container mx-auto max-w-screen-lg px-10">
+      <div className="container mx-auto max-w-screen-xl px-10">
         <div className="flex md:flex-row flex-col items-center my-10">
           <div className="flex flex-col items-start">
             <span className="text-white text-5xl md:text-6xl leading-[1.2] font-extrabold text-center md:text-left">
@@ -47,7 +47,7 @@ const Home: NextPage = () => {
 
           <img
             src="/illustrations/undraw_co-working_re_w93t.svg"
-            className="h-[25em] ml-auto md:block hidden"
+            className="h-[25em] ml-auto"
           />
         </div>
       </div>