Alignment issue

index.html

@@ -431,7 +431,7 @@ <h3 style="font-weight: 600;font-size: 24px;">Get Flat 15% OFF</h3>
     <div class="section__header">
       <div>
         <h2 class="section__title" data-aos="fade-in">Explore top destinations</h2>
-        <p class="section__subtitle" data-aos="fade-in">
+        <p class="section__subtitle" data-aos="fade-in" style="margin-left: 280px; text-align: center;">
           Explore your dream places around the world. Here you can find your perfect destination.
         </p>
       </div>
@@ -526,8 +526,8 @@ <h3>MALDIVES</h3>
 
     <section class="trip" id="trip" data-aos="zoom-in" data-aos-offset="100">
       <div class="section__container trip__container">
-        <h2 class="section__title">Best trip packages</h2>
-        <p class="section__subtitle">
+        <h2 class="section__title" style="text-align: center;">Best trip packages</h2>
+        <p class="section__subtitle" style="margin-left: 270px;">
           Top trip deals curated for you. Get the best package for your adventure and save more.
         </p>
         <div class="trip__grid">

styles.css

@@ -377,7 +377,7 @@ body {
 }
 
 .section__header {
-  display: flex;
+  /* display: flex; */
   align-items: center;
   justify-content: space-between;
   gap: 2rem;
@@ -386,6 +386,7 @@ body {
 }
 
 .section__title {
+  /* text-align: center; */
   font-size: 2rem;
   font-weight: 600;
   color: var(--text-dark);
@@ -409,7 +410,7 @@ body {
   font-size: 1rem;
   color: var(--text-dark);
   max-width: calc(var(--max-width) / 2);
-  text-align: right;
+  /* text-align: right; */
 }
 
 .section_header .section_subtitle {
@@ -1075,7 +1076,7 @@ header {
 .gallary__container {
   display: flex;
   background-color: var(--secondary-color);
-  width: 80%;
+  /* width: 80%; */
   justify-content: center;
   align-items: center;
   gap: 4rem;
@@ -1114,7 +1115,7 @@ header {
 }
 
 .gallary__content>div {
-  max-width: 400px;
+  max-width: 750px;
 }
 
 .gallary__content h2 {