Make navbar line up with content

web/components/nav-bar.tsx

@@ -9,10 +9,11 @@ import { ProfileMenu } from './profile-menu'
 
 export function NavBar(props: {
   darkBackground?: boolean
+  wide?: boolean
   className?: string
   children?: any
 }) {
-  const { darkBackground, className, children } = props
+  const { darkBackground, wide, className, children } = props
 
   const user = useUser()
 
@@ -23,22 +24,29 @@ export function NavBar(props: {
   return (
     <nav
       className={clsx(
-        'w-full flex flex-row justify-center items-center p-4 shadow-sm mb-4',
+        'w-full p-4 mb-4 shadow-sm',
         !darkBackground && 'bg-white',
         className
       )}
       aria-label="Global"
     >
-      <ManticLogo darkBackground={darkBackground} />
+      <Row
-
+        className={clsx(
-      <Row className="items-center gap-6 sm:gap-8 md:ml-16 lg:ml-40">
+          'justify-between items-center mx-auto px-4',
-        {children}
+          wide ? 'max-w-7xl' : 'max-w-4xl'
-
-        {user ? (
-          <SignedInHeaders user={user} themeClasses={themeClasses} />
-        ) : (
-          <SignedOutHeaders themeClasses={themeClasses} />
         )}
+      >
+        <ManticLogo darkBackground={darkBackground} />
+
+        <Row className="items-center gap-6 sm:gap-8 md:ml-16 lg:ml-40">
+          {children}
+
+          {user ? (
+            <SignedInHeaders user={user} themeClasses={themeClasses} />
+          ) : (
+            <SignedOutHeaders themeClasses={themeClasses} />
+          )}
+        </Row>
       </Row>
     </nav>
   )

web/components/page.tsx

@@ -6,10 +6,10 @@ export function Page(props: { wide?: boolean; children?: any }) {
 
   return (
     <div>
-      <NavBar />
+      <NavBar wide={wide} />
       <div
         className={clsx(
-          'max-w-4xl px-4 pb-8 mx-auto w-full',
+          'w-full px-4 pb-8 mx-auto',
           wide ? 'max-w-7xl' : 'max-w-4xl'
         )}
       >

web/pages/landing-page.tsx

@@ -32,7 +32,7 @@ const scrollToAbout = () => {
 function Hero() {
   return (
     <div className="overflow-hidden h-screen bg-world-trading bg-cover bg-gray-900 bg-center lg:bg-left">
-      <NavBar className="max-w-4xl" darkBackground>
+      <NavBar wide darkBackground>
         <div
           className="text-base font-medium text-white ml-8 cursor-pointer hover:underline hover:decoration-teal-500 hover:decoration-2"
           onClick={scrollToAbout}
@@ -42,7 +42,7 @@ function Hero() {
       </NavBar>
       <main>
         <div className="pt-32 sm:pt-8 lg:pt-0 lg:pb-14 lg:overflow-hidden">
-          <div className="mx-auto max-w-7xl lg:px-8">
+          <div className="mx-auto max-w-7xl lg:px-8 xl:px-0">
             <div className="lg:grid lg:grid-cols-2 lg:gap-8">
               <div className="mx-auto max-w-md px-8 sm:max-w-2xl sm:text-center lg:px-0 lg:text-left lg:flex lg:items-center">
                 <div className="lg:py-24">