Stylezed all buttons width

app/page.tsx

@@ -25,7 +25,7 @@ export default function Home() {
       <NewsSubscribe />      
       <OurNews />
       <div className="flex justify-center bg-primary pt-2 pb-6">
-      <span className="w-[87%] mx-auto text-center"><ButtonEditable linkHref="/newsPost" SWtext="Visa alla" ENtext="View all" textColor="text-white" bgColor="bg-black" hoverEffect="hover:bg-gray hover:text-white" /></span>
+      <span className="max-w-[90%] w-[342px] mx-auto text-center"><ButtonEditable linkHref="/newsPost" SWtext="Visa alla" ENtext="View all" textColor="text-white" bgColor="bg-black" hoverEffect="hover:bg-gray hover:text-white" /></span>
       </div>
       <HomeDownload />
       <HomeStatistics />

components/AboutVision/index.tsx

@@ -42,7 +42,7 @@ const AboutVision: React.FC = () => {
     }, [language]);
 
     return (
-        <div className="bg-white flex flex-col lg:flex-row items-center justify-center w-full px-5 lg:px-7 md:p-1">
+        <div className="bg-white text-center sm:text-start flex flex-col lg:flex-row items-center justify-center w-full px-3 lg:px-7 md:p-1">
             <div className="w-full md:max-w-2xl mt-12 flex flex-col md:px-3 md:pl-4 md:pr-1">
                 <h2 className="text-4xl font-semibold">{usedData?.title1}</h2>
                 <p className="text-base pt-2 font-mono">{usedData?.text1}</p>
@@ -52,9 +52,8 @@ const AboutVision: React.FC = () => {
                 <h2 className="text-4xl font-semibold pt-4">{usedData?.title2}</h2>
                 <p className="text-base pt-2 font-mono">{usedData?.text2}</p>
 
-                <span className="text-center p-3 py-6 md:p-0 md:py-4 md:text-left">
+                <span className="text-center py-6 md:p-0 md:py-4 md:text-left">
           <ButtonEditable linkHref="/contact" SWtext="Boka ett möte" ENtext="Book a meeting" textColor="text-white" bgColor="bg-black" hoverEffect="hover:bg-gray" />
-
                 </span>
             </div>
             <div className="w-full md:max-w-2xl flex justify-center">

components/Faq/index.tsx

@@ -61,7 +61,7 @@ const Faq: React.FC = () => {
   return (
     <>
       <div
-        className="container w-full min-w-full py-24 md:py-38 px-4 md:px-20 flex flex-col justify-center items-center text-center bg-primary"
+        className="container w-full min-w-full py-24 md:py-38 px-2 md:px-20 flex flex-col justify-center items-center text-center bg-primary"
         id="faq"
       >
         <h5
@@ -204,7 +204,7 @@ const Faq: React.FC = () => {
             ? "Feel free to contact us if you have any questions."
             : "Kontakta oss gärna om du har några frågor."}
         </p>
-        <span className="min-w-[300px]">
+        <span className="min-w-[300px] w-[342px]">
         <ButtonEditable linkHref="/contact" SWtext="Kontakta oss" ENtext="Contact us" textColor="text-white" bgColor="bg-black" hoverEffect="hover:bg-gray" />
 
         </span>

components/HomeHowWorks/index.tsx

@@ -53,7 +53,7 @@ const HomeHowWorks = () => {
     language === "english" ? textContent.english : textContent.swedish;
 
   return (
-    <div className="w-full py-24 px-4 md:px-20 flex flex-col justify-between items-center">
+    <div className="w-full py-24 px-3 md:px-20 flex flex-col justify-between items-center">
       <h2 className="mb-8 text-heading2 text-cente">{content.heading}</h2>
       <div className="flex flex-col flex-wrap justify-center md:justify-between items-center middleWidth:flex-row">
         <CardHowWorks

components/HomeKnow/index.tsx

@@ -26,7 +26,7 @@ const HomeKnow: React.FC = () => {
                     )}
                         <span className="text-base"><a href="mailto:[email protected]">[email protected]</a></span>
                 </div>
-                <div className="w-full flex flex-col justify-center items-center text-center mb-12 md:items-start p-2 md:mb-0 md:text-left md:pt-5 md:flex-1 md:max-w-none md:pb-12">
+                <div className="w-full flex flex-col justify-center items-center text-center mb-12 md:items-start py-2 md:mb-0 md:text-left md:pt-5 md:flex-1 md:max-w-none md:pb-12">
                     {language === "english" ? (
                         <h2 className="font-bold text-heading2 pb-3 md:text-heading2 mb-3">
                             Want to know more? <br/>

components/NewsSubscribe/index.tsx

@@ -65,8 +65,8 @@ Min e-post: "${userEmail}"`;
         <p className="text-base">{language === "english" ? "We are expanding rapidly, keep yourself updated via newsletter" : "Vi expanderar snabbt, håll dig uppdaterad via nyhetsbrevet"}</p>
         <div className="sm:relative w-[360px] sm:w-[420px] flex-col sm:flex-row items-center justify-center mt-3 max-w-[98%]">
           <form onSubmit={onSubmit} >
-            <input onChange={(e) => setUserEmail(e.target.value)} id="email" type="email" placeholder="[email protected]" className="sm:pe-32 ps-2 pe-2 py-[12px] w-full rounded-[40px] mb-2 sm:mb-0 text-primary focus-visible:outline-primary"/>
-            <button type="submit" className="sm:w-[110px] w-[360px] max-w-[98%] py-[14px] sm:py-[6px] rounded-[40px] text-center sm:absolute text-base sm:text-[12px] sm:right-[10px] sm:top-[6px] sm:rounded-[20px] bg-black text-white hover:bg-[#d2cfcf] hover:text-black hover:border">
+            <input onChange={(e) => setUserEmail(e.target.value)} id="email" type="email" placeholder="[email protected]" className="sm:pe-32 ps-2 pe-2 py-[12px] w-[342px] sm:w-full rounded-[40px] mb-2 sm:mb-0 text-primary focus-visible:outline-primary"/>
+            <button type="submit" className="sm:w-[110px] w-[342px] max-w-[98%] py-[14px] sm:py-[6px] rounded-[40px] text-center sm:absolute text-base sm:text-[12px] sm:right-[10px] sm:top-[6px] sm:rounded-[20px] bg-black text-white hover:bg-[#d2cfcf] hover:text-black hover:border">
               {language === "english" ? "Subscribe" : "Prenumerera"}
             </button>
           </form>