set experiences section responsive

src/components/Experiences/Experiences.css

@@ -7,7 +7,7 @@
 }
 
 .experiences-container {
-    width: 50%;
+    width: 100%;
     position: relative;
     display: flex;
     flex-direction: column;
@@ -23,3 +23,15 @@
     height: 100%;
     background-color: rgba(176, 176, 176, 0.2);
 }
+
+@media (max-width: 768px) {
+    .experiences-container {
+        width: 90%;
+        align-items: flex-start;
+        margin-right: 20px;
+    }
+
+    .experiences-container::before {
+        left: 20px;
+    }
+}

src/components/SingleExperience/SingleExperience.css

@@ -4,6 +4,8 @@
     margin-bottom: 3rem;
     padding: 1.5rem;
     display: flex;
+    gap: 6rem;
+    justify-content: center;
 }
 
 .experience-card::before {
@@ -21,18 +23,17 @@
 
 
 .experience-card-left {
-    width: 50%;
+    width: 25%;
     text-align: end;
-    margin-right: 8rem;
 }
 
 .experience-card-right {
-    width: 50%;
+    width: 25%;
 }
 
 .experience-company {
     color: var(--important-color);
-    font-size: 1.2rem;
+    font-size: 1.5rem;
     margin: 0;
 }
 
@@ -75,3 +76,24 @@
     font-size: 1.2rem;
     line-height: 1;
 }
+
+
+
+@media (max-width: 768px) {
+    .experience-card{
+        display: flex;
+        flex-direction: column;
+        gap: 0;
+    }
+    .experience-card::before {
+        left: 20px;
+        top: 31px;
+    }
+    .experience-card-left, .experience-card-right{
+        width: fit-content;
+        margin-left: 20px;
+    }
+    .experience-card-left{
+        text-align: left;
+    }
+}

src/index.css

@@ -9,6 +9,7 @@
 
 html{
   scroll-behavior: smooth;
+  overflow-x: hidden;
 }
 
 
@@ -16,6 +17,7 @@ body {
   margin: 0;
   display: flex;
   place-items: center;
+  overflow-x: hidden;
 }
 
 .section-title {