add container to each section

Author: sanjaypinna

app/[locale]/(user)/components/Content.tsx

@@ -14,8 +14,8 @@ export const Content = () => {
     }
   };
   return (
-    <main>
-      <div className="flex items-center justify-center gap-20 bg-primaryBlue p-8 lg:p-16">
+    <main className='bg-primaryBlue p-8 lg:p-16'>
+      <div className="flex items-center container justify-center gap-20 ">
         <div className="flex flex-col gap-11">
           <div className="flex flex-col">
             <Text variant="heading3xl" color="onBgDefault">

app/[locale]/(user)/components/Datasets.tsx

@@ -52,10 +52,10 @@ const Datasets = () => {
   const router = useRouter();
 
   return (
-    <div className="p-4 my-5 lg:p-16">
-      <div className="flex flex-col gap-2  px-2">
+    <div className=" container my-5 lg:p-16">
+      <div className="flex flex-col gap-2 p-3  lg:p-0 md:p-0 ">
         <Text variant="heading3xl">Recent Datasets</Text>
-        <div className="flex justify-between flex-wrap gap-2">
+        <div className="flex flex-wrap justify-between gap-2 ">
           <Text variant="headingLg" fontWeight="medium">
             Recently updated and trending Datasets on CivicDataSpace
           </Text>
@@ -76,7 +76,7 @@ const Datasets = () => {
 
           <CarouselContent className="p-4 ">
             {isLoading ? (
-              <div className='p-8'>
+              <div className="p-8">
                 <Spinner />
               </div>
             ) : (

app/[locale]/(user)/components/Sectors.tsx

@@ -36,8 +36,8 @@ const Sectors = () => {
       .join('+'); // Join with '+'
   }
   return (
-    <div className="my-5 p-4 lg:p-16">
-      <div className="flex flex-col gap-2 px-2 ">
+    <div className="container my-5 p-8 lg:p-16">
+      <div className="flex flex-col gap-2 px-2 lg:px-0 md:px-0">
         <Text variant="heading3xl">Explore Sectors</Text>
         <div className="flex flex-wrap justify-between gap-2">
           <Text variant="headingLg" fontWeight="medium">