fix justify for mobile and dekstop

client/src/pages/Category.jsx

@@ -44,7 +44,7 @@ const Category = () => {
         </div>
       </div>
       <div
-        className={`flex flex-row flex-wrap items-start mx-auto justify-center gap-2 bg-gradient-to-b ${selectedCat?.re} ${selectedCat?.to} h-full sm:gap-4 py-12 px-4
+        className={`flex flex-row flex-wrap items-start mx-auto justify-center sm:justify-start gap-2 bg-gradient-to-b ${selectedCat?.re} ${selectedCat?.to} h-full sm:gap-4 py-12 px-4
         `}
       >
         {compLoad ? (

client/src/pages/Home/Main.jsx

@@ -72,7 +72,7 @@ const Main = () => {
         </h1>
       </div>
       <Suspense fallback={<Loading />}>
-        <div className="flex flex-wrap mx-auto flex-row items-center justify-start gap-4">
+        <div className="flex flex-wrap mx-auto flex-row items-center justify-center sm:justify-start gap-4">
           {isPLoading ? (
             Array.from({ length: 3 }, (_, index) => (
               <div key={index}>
@@ -126,7 +126,7 @@ const Main = () => {
 
       <Suspense fallback={<Loading />}>
         <div
-          className={`flex flex-row flex-wrap items-start justify-center gap-4 mt-4
+          className={`flex flex-row flex-wrap start items-start justify-center sm:justify-start gap-4 mt-4
         `}
         >
           {isLoading ? (

client/src/pages/SearchMusic.jsx

@@ -148,7 +148,7 @@ const SearchMusic = () => {
           </h1>
         </div>
         <div
-          className={`flex items-center flex-row flex-wrap gap-4 mt-4
+          className={`flex items-center flex-row flex-wrap justify-center sm:justify-start gap-4 mt-4
         `}
         >
           {renderMusicCards()}