diff --git a/src/bestDeals.html b/src/bestDeals.html
index ec291a0..58255aa 100644
--- a/src/bestDeals.html
+++ b/src/bestDeals.html
@@ -9,7 +9,7 @@
 
 <body>
 
-    <div class="xl:px-[100px] xl:px-[150px]   p-6">
+    <div class="xl:px-[100px] xl:px-[150px] container mx-auto  p-6">
             <!-- best deals bar-->
         <div class="flex flex-col md:flex-row justify-between items-center  pt-3">
             <div class="flex justify-start items-center gap-6 mb-4 flex-wrap md:mb-0">
@@ -30,7 +30,7 @@ <h2 class="text-[#191c1e] text-2xl  leading-loose">Best Deals</h2>
             <!-- browse all btn-->
             <div class="py-1.5 bg-white flex items-center gap-2">
                 <a href="shop.html" class="text-[#2ca4f3] text-sm  leading-tight">Browse All Products <i
-                        class="fa fa-arrow-right" aria-hidden="true"></i></a>
+                        class="fa fa-arrow-right transforn ltr:scale-x-100 rtl:scale-x-[-1]" aria-hidden="true"></i></a>
 
             </div>
 
diff --git a/src/categoriesSlider.html b/src/categoriesSlider.html
index 99130a2..326fc8d 100644
--- a/src/categoriesSlider.html
+++ b/src/categoriesSlider.html
@@ -13,7 +13,7 @@
     <h1 class="text-center    text-[#191c1e] text-[32px] py-6 ">Shop with
       Categorys </h1>
   
-  <div class=" px-9lg:px-[100px] xl:px-[150px]">
+  <div class=" px-9lg:px-[100px] container mx-auto xl:px-[150px]">
     <div class="px-10">
       <div class="w-full relative ">
         <div class="swiper multiple-slide-carousel swiper-container relative">
diff --git a/src/contactbar.html b/src/contactbar.html
index c4290e7..d162846 100644
--- a/src/contactbar.html
+++ b/src/contactbar.html
@@ -6,8 +6,9 @@
     <title>Document</title>
 </head>
 <body>
-  <div class="lg:px-[150px] w-full py-2 bg-[#f8f8f8] justify-between items-center gap-2 flex flex-col lg:flex-row">
-    <!-- Main container for the header section -->
+  <div class="bg-[#f8f8f8]">
+    <div class="lg:px-[150px] w-full py-2 container mx-auto justify-between items-center gap-2 flex flex-col lg:flex-row">
+            <!-- Main container for the header section -->
     
     <!-- Navigation and language selection (visible on small screens and up) -->
     <ul class="hidden sm:flex text-center min-[360px]:gap-3">
@@ -15,8 +16,9 @@
             <form class="max-w-sm mx-auto">
                 <div class="relative">
                     <!-- Dropdown button for language selection -->
-                    <div id="countries-button" class="flex">
-                        <img src="./../assets/images/countries/usa.svg" alt="USA" class="w-5 h-5 mr-2"> English
+                    <div id="countries-button" class="flex gap-2">
+                        <img src="./../assets/images/countries/usa.svg" alt="USA" class="w-5 h-5">
+                        <span>English</span>
                     </div>
                     
                     <!-- Dropdown menu for available languages -->
@@ -24,20 +26,23 @@
                         <ul class="py-2 text-sm text-gray-700">
                             <!-- Language option: Arabic -->
                             <li>
-                                <button type="button" class="flex items-center w-full px-4 py-2 hover:bg-gray-100">
-                                    <img src="./../assets/images/icon.svg" alt="Arabic" class="w-5 h-5 mr-2"> Arabic
+                                <button type="button" class="flex items-center w-full px-4 py-2 hover:bg-gray-100 gap-2">
+                                    <img src="./../assets/images/icon.svg" alt="Arabic" class="w-5 h-5">
+                                    <span>Arabic</span>
                                 </button>
                             </li>
                             <!-- Language option: Mandarin -->
                             <li>
-                                <button type="button" class="flex items-center w-full px-4 py-2 hover:bg-gray-100">
-                                    <img src="./../assets/images/countries/china.svg" alt="Mandarin" class="w-5 h-5 mr-2"> Mandarin
+                                <button type="button" class="flex items-center w-full px-4 py-2 hover:bg-gray-100 gap-2">
+                                    <img src="./../assets/images/countries/china.svg" alt="Mandarin" class="w-5 h-5">
+                                    <span>Mandarin</span>
                                 </button>
                             </li>
                             <!-- Language option: Russian -->
                             <li>
-                                <button type="button" class="flex items-center w-full px-4 py-2 hover:bg-gray-100">
-                                    <img src="./../assets/images/countries/russia.svg" alt="Russian" class="w-5 h-5 mr-2"> Russian
+                                <button type="button" class="flex items-center w-full px-4 py-2 hover:bg-gray-100 gap-2">
+                                    <img src="./../assets/images/countries/russia.svg" alt="Russian" class="w-5 h-5">
+                                    <span>Russian</span>
                                 </button>
                             </li>
                         </ul>
@@ -68,18 +73,21 @@
     <!-- Contact information section -->
     <ul class="flex gap-2 pt-[3px] pb-0.5">
         <!-- Email contact -->
-        <li class="text-[#666666] text-[13px]">info@alrawdaegypt.com
+        <li class="text-[#666666] text-[13px]">
             <i class="pl-2 fa-regular text-[#62D0B6] fa-envelope"></i>
+            <span>info@alrawdaegypt.com</span>
         </li>
         
         <!-- Divider -->
         <li class="m-1.5 shrink-0 mx-0 h-[10px] border border-[#d6d6d6]"></li>
         
         <!-- Phone contact -->
-        <li class="text-[#666666] text-[13px]">+201234567890 
+        <li class="text-[#666666] text-[13px]">
             <i class="pr-2 fa-solid fa-phone-volume text-[#62D0B6] transform -scale-x-100"></i>
+            <span>+201234567890 </span>
         </li>
     </ul>
+    </div>
 </div>
 
 </body>
diff --git a/src/featurs.html b/src/featurs.html
index 93b93d0..40adbec 100644
--- a/src/featurs.html
+++ b/src/featurs.html
@@ -8,7 +8,7 @@
 </head>
 
 <body>
-    <div class="xl:px-[100px]  p-3">
+    <div class="xl:px-[100px] container mx-auto p-3">
         <!-- Main container for the support features -->
         <div class="border py-4 rounded-md border-[#e4e7e9] items-center justify-center flex flex-row flex-wrap">
 
diff --git a/src/featursProducts.html b/src/featursProducts.html
index 88332f2..647639b 100644
--- a/src/featursProducts.html
+++ b/src/featursProducts.html
@@ -8,7 +8,7 @@
 </head>
 
 <body>
-        <div class="xl:px-[100px] xl:px-[150px] p-6">
+        <div class="xl:px-[100px] xl:px-[150px] p-6 container mx-auto">
 
 
             <div class="mt-6 flex gap-5  h-full flex-col  xl:h-fit lg:flex-row">
diff --git a/src/header.html b/src/header.html
index b6d7567..53484f4 100644
--- a/src/header.html
+++ b/src/header.html
@@ -7,7 +7,7 @@
 </head>
 <body>
       
-  <div class="flex flex-col xl:flex-row px-4 xl:px-[100px]  p-6 gap-4">
+  <div class="flex flex-col xl:flex-row px-4 xl:px-[100px]  p-6 gap-4 container mx-auto">
      <!-- carousel  -->
     <div class="flex flex-col w-full relative md:flex-row px-4 md:px-10 py-8 xl:w-8/12 bg-[#f2f3f4] rounded-md" >
       <div class="w-full relative">
diff --git a/src/offer&nav.html b/src/offer&nav.html
index 3f44353..0578ef6 100644
--- a/src/offer&nav.html
+++ b/src/offer&nav.html
@@ -20,7 +20,7 @@
 
     <!--  search-->
     <div
-      class="h-auto p-0  m:px-4 md:px-10 px-3 lg:px-[150px] py-8 w-full flex  justify-between  items-center sm:gap-6 relative">
+      class="h-auto p-0 container mx-auto  m:px-4 md:px-10 px-3 lg:px-[150px] py-8 w-full flex  justify-between  items-center sm:gap-6 relative">
 
       <div class="flex justify-center items-center">
         <div class=" flex items-center xl:hidden">
diff --git a/src/offer.html b/src/offer.html
index 7c2f716..5d7505c 100644
--- a/src/offer.html
+++ b/src/offer.html
@@ -7,37 +7,39 @@
 </head>
 <body>
     
- <div class="py-3  relative bg-[#191c1e] flex flex-col lg:flex-row justify-between items-center">
-    <!--  Black Friday -->
-    <div class="flex items-center gap-2.5  ltr:lg:ml-[100px] rtl:lg:mr-[100px]">
-      <!-- Banner div  -->
-      <div class="px-2.5 py-1.5 bg-[#f3de6d] -rotate-3">
-        <span class="text-[#191c1e] text-base sm:text-xl ">Black</span>
-      </div>
-      <!-- Main heading -->
-      <h1 class="text-white text-lg sm:text-2xl ">Friday</h1>
-    </div>
-  
-    <!--   Discount  -->
-    <div class="flex items-center gap-2 my-4 lg:my-0">
-      <span class="text-white text-xs sm:text-sm font-medium font-['Public Sans'] ">Up to</span>
-      <strong class="text-[#eac70b] text-2xl sm:text-[40px]   ">59%</strong>
-      <span class="text-white text-sm sm:text-xl  ">OFF</span>
-    </div>
-  
-    <!-- shop now -->
-    <a href="shop.html" class="flex items-center ltr:lg:mr-[100px] rtl:lg:ml-[100px]">
-      <div class="h-11 px-3 bg-[#eac70b] rounded-sm justify-center items-center gap-2 inline-flex">
-        <div class="text-[#191c1e] text-sm sm:text-base font-bold font-['Public Sans'] uppercase  tracking-tight">Shop
-          now</div>
-        <i class="fa fa-arrow-right transform ltr:scale-x-100 rtl:scale-x-[-1]" aria-hidden="true"></i>
-      </div>
-    </a>
-  
-    <!-- Exit Button -->
-    <button class="p-2 ltr:right-4 ltr:sm:right-6 rtl:left-4 rtl:sm:left-6 absolute bg-[#303639] rounded-sm flex items-center">
-      <i class="fa-solid fa-x text-white text-xs"></i>
-    </button>
+ <div class=" bg-[#191c1e] ">
+  <div class="py-3  relative flex flex-col lg:flex-row justify-between items-center container mx-auto">
+        <!--  Black Friday -->
+        <div class="flex items-center gap-2.5  ltr:lg:ml-[100px] rtl:lg:mr-[100px]">
+          <!-- Banner div  -->
+          <div class="px-2.5 py-1.5 bg-[#f3de6d] -rotate-3">
+            <span class="text-[#191c1e] text-base sm:text-xl ">Black</span>
+          </div>
+          <!-- Main heading -->
+          <h1 class="text-white text-lg sm:text-2xl ">Friday</h1>
+        </div>
+      
+        <!--   Discount  -->
+        <div class="flex items-center gap-2 my-4 lg:my-0">
+          <span class="text-white text-xs sm:text-sm font-medium font-['Public Sans'] ">Up to</span>
+          <strong class="text-[#eac70b] text-2xl sm:text-[40px]   ">59%</strong>
+          <span class="text-white text-sm sm:text-xl  ">OFF</span>
+        </div>
+      
+        <!-- shop now -->
+        <a href="shop.html" class="flex items-center ltr:lg:mr-[100px] rtl:lg:ml-[100px]">
+          <div class="h-11 px-3 bg-[#eac70b] rounded-sm justify-center items-center gap-2 inline-flex">
+            <div class="text-[#191c1e] text-sm sm:text-base font-bold font-['Public Sans'] uppercase  tracking-tight">Shop
+              now</div>
+            <i class="fa fa-arrow-right transform ltr:scale-x-100 rtl:scale-x-[-1]" aria-hidden="true"></i>
+          </div>
+        </a>
+      
+        <!-- Exit Button -->
+        <button class="p-2 ltr:right-4 ltr:sm:right-6 rtl:left-4 rtl:sm:left-6 absolute bg-[#303639] rounded-sm flex items-center">
+          <i class="fa-solid fa-x text-white text-xs"></i>
+        </button>
+  </div>
   </div>
 </body>
 </html>
\ No newline at end of file
diff --git a/src/product_details.html b/src/product_details.html
index fb0d364..91e3ced 100644
--- a/src/product_details.html
+++ b/src/product_details.html
@@ -27,7 +27,7 @@
      </div>
 
     <!-- Product Details -->
-    <div class="flex flex-col xl:flex-row px-4 lg:px-[100px] xl:px-[150px]  gap-4">
+    <div class="flex flex-col xl:flex-row px-4 lg:px-[100px] xl:px-[150px]  gap-4 container mx-auto">
         <div class="flex flex-col w-full md:flex-row  py-5">
             <div class="flex  flex-col w-full   md:w-1/2">
                 <div class="border mx-6">
