media queries added

index.css

@@ -121,13 +121,14 @@ main::before {
 }
 
 main{
-  overflow-x: hidden;
   width: 100%;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
+    overflow-x: hidden ;
+
 }
 
 @keyframes color {
@@ -181,6 +182,7 @@ main{
   flex-flow: column wrap;
   justify-content: center;
   align-items: center;
+  margin-bottom: 5rem;
 }
 
 .section .ul {
@@ -349,7 +351,7 @@ svg:hover {
 }
 
 .my-projects {
-  width: 100%;
+  width: 95%;
   height: 100%;
   display: flex;
   flex-direction: column;
@@ -358,9 +360,10 @@ svg:hover {
   color: white;
   margin-top :30rem;
   margin-bottom: 5rem;
-  
+
 }
 
+
 .my-projects h2{
   font-size: 3rem;
   display: inline;
@@ -610,7 +613,7 @@ color:inherit;
 .section-wrapper {
   width: 100%;
   padding: 10px;
-  margin-left: 5rem;
+  margin-left: 1.5rem;
 }
 .box-wrapper {
   position: relative;
@@ -730,6 +733,13 @@ color:inherit;
 
 /* Responsive css */
 @media only screen and (max-width: 767px) {
+  .my-projects {
+    width: 100%;
+    margin-left: 5rem; 
+  }
+  main{
+    overflow-x:visible;
+  }
   .box-wrapper {
     width: 100%;
   }