correcting margin around the image

introSection.css

@@ -10,22 +10,23 @@
   padding-top: 30px;
   padding-bottom: 30px;
 }
-.m-heading {				background-color: rgb(123, 53, 15);
-				text-align: center;
-        margin-left: 20%;
-        margin-right: 20%;
-				font-weight: 800;
-				color: aliceblue;
-				padding-top: 30px;
-				padding-bottom: 30px;
+.m-heading {
+  background-color: rgb(123, 53, 15);
+  text-align: center;
+  margin-left: 20%;
+  margin-right: 20%;
+  font-weight: 800;
+  color: aliceblue;
+  padding-top: 30px;
+  padding-bottom: 30px;
 }
 
 /* CORRECT THE HERO IMAGE: I also changed the height to a 850px to give clearer view of the cute puppies */
-.main-body-section-div{
+.main-body-section-div {
   /* background: url("./Assets/Images/main-heading-body-bg.jpg") no-repeat center
     center/cover; */
-  background-repeat: no-repeat!important;
-  background-size: cover!important;
+  background-repeat: no-repeat !important;
+  background-size: cover !important;
   min-height: 850px;
   opacity: 0.9;
   padding-top: 80px;
@@ -35,8 +36,6 @@
 .main-body-heading-text {
   padding-top: 8%;
   padding-left: 5%;
-
-
 }
 
 /* CORRECT THE HERO IMAGE: The list element style was causing the whitespace. Removing it succesfully fixes the problem */
@@ -64,7 +63,7 @@
   letter-spacing: 3px;
   color: white;
 }
-.main-body-heading-text span{
+.main-body-heading-text span {
   color: hsl(37, 73%, 59%);
   text-shadow: 3px 3px 4px rgba(0, 0, 0, 0.5);
 }
@@ -95,7 +94,7 @@
   display: flex;
   flex-direction: row;
   justify-content: space-evenly;
-  scroll-margin-top:96px;
+  scroll-margin-top: 96px;
 }
 
 .main-img {
@@ -104,6 +103,7 @@
   border-radius: 15px;
   overflow: hidden;
   transition: all 300ms;
+  margin: 0 10px;
 }
 
 .hv {
@@ -148,7 +148,7 @@
   width: 330px;
   height: 330px;
   object-fit: cover;
-  object-position: 25% 75%;;
+  object-position: 25% 75%;
 }
 
 ::-webkit-scrollbar {

output.css

@@ -12,20 +12,14 @@
 /* Add this to your CSS file */
 /* Add this to your CSS file */
 
-
-
 .contactusform-color-lightmode {
-  color: rgb(18, 17, 17) ;  /* contact us form text color in light-mode */
+  color: rgb(18, 17, 17); /* contact us form text color in light-mode */
 }
 
-.contactusform-color-darkmode{
+.contactusform-color-darkmode {
   /*if contact us form text color needs to be changed, can be chnaged here */
 }
 
-
-
-
-
 *,
 ::before,
 ::after {
@@ -53,7 +47,7 @@
 
 html {
   line-height: 1.5;
-  scroll-behavior: smooth;    /* gives a smooth scroll effect */
+  scroll-behavior: smooth; /* gives a smooth scroll effect */
   /* 1 */
   -webkit-text-size-adjust: 100%;
   /* 2 */
@@ -229,8 +223,6 @@ textarea {
   /* 3 */
 }
 
-
-
 /*---change*/
 
 /*
@@ -1263,47 +1255,43 @@ video {
 .rounded-full {
   border-radius: 9999px;
   display: flex;
-  gap:10px;
+  gap: 10px;
 }
 
 .mission-1 {
   display: flex;
-  color: #F8FAFC;
+  color: #f8fafc;
   margin: 0.5rem;
   width: 3.5rem;
   font-size: 1rem;
   font-weight: 600;
-
 }
 
 .mission-2 {
   display: flex;
-  color: #F8FAFC;
+  color: #f8fafc;
   margin: 0.7rem;
   width: 3.5rem;
   font-size: 1rem;
   font-weight: 600;
-
 }
 
 .mission-L1 {
   display: flex;
-  color: #333231CC;
+  color: #333231cc;
   margin: 0.8rem;
   width: 3.5rem;
   font-size: 1rem;
   font-weight: 600;
-
 }
 
 .mission-L2 {
   display: flex;
-  color: #333231CC;
+  color: #333231cc;
   margin: 0.8rem;
   width: 3.5rem;
   font-size: 1rem;
   font-weight: 600;
-
 }
 
 .rounded {
@@ -1344,13 +1332,13 @@ video {
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
 }
 
-.border-red{
+.border-red {
   --tw-border-opacity: 1;
   border-color: rgb(255 0 0 / var(--tw-border-opacity));
 }
 
-.help { 
-  display: none; 
+.help {
+  display: none;
   font-size: small;
   color: red;
 }
@@ -1668,14 +1656,14 @@ video {
 
 .text-gray-900 {
   --tw-text-opacity: 1;
-  color: rgb(17 24 39 / var(--tw-text-opacity));
+  color: rgb(209 213 221);
 }
 
 .text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
-.text-choco{
+.text-choco {
   color: chocolate;
 }
 
@@ -2246,14 +2234,10 @@ video {
   }
 }
 .text-lg {
-
-
   transition: width 2s, transform 2s;
 }
 .text-lg:hover {
   width: 1500px;
-
-  border-radius:8px;
-
-}
 
+  border-radius: 8px;
+}