[Blog] [Ajay]: Fix responsiveness

Author: Ajay kumar

TestArena/Blog/Common/Header.razor

@@ -21,7 +21,7 @@
 
 <header class="article-header">
     <h1 class="fw-bold">@Title</h1>
-    <img src="@Image" alt="Article Banner" height="200" width="auto" class="img-fluid rounded mx-auto d-block my-3 article-image">
+    <img src="@Image" alt="Article Banner" height="200" width="auto" class="img-fluid rounded mx-auto d-block my-3">
 </header>
 
 @* <div class="row"> *@

TestArena/Blog/Common/Section.razor

@@ -32,5 +32,6 @@
                 break;
         }
     }
+    <hr class="border border-success border-1 opacity-50">
     <div>@ChildContent</div>
 </section>

TestArena/Layout/MainLayout.razor

@@ -7,19 +7,20 @@
     <main>
         <header class="bg-primary text-white p-3 d-flex align-items-center">
             <div class="container-fluid">
-                <div class="row">
-                    <div class="col-12 col-md-4">
-                        <div class="logo">
+                <div class="container-fluid">
+                    <div class="row align-items-center">
+                        <!-- Logo on the left -->
+                        <div class="col-12 col-md-4 d-flex justify-content-md-start justify-content-center">
                             <h3 class="m-0">Dev Arena</h3>
                         </div>
-                    </div>
-                    <div class="col-12 col-md-4">
-                        <div class="search-bar text-center">
-                            <input type="text" class="form-control w-75 mx-auto" placeholder="Search...">
+
+                        <!-- Search bar in the center -->
+                        <div class="col-12 col-md-4 d-flex justify-content-md-center justify-content-center mt-2 mt-md-0">
+                            <input type="text" class="form-control w-75" placeholder="Search...">
                         </div>
-                    </div>
-                    <div class="col-12 col-md-4">
-                        <div class="settings d-flex justify-content-end">
+
+                        <!-- Settings button on the right -->
+                        <div class="col-12 col-md-4 d-flex justify-content-md-end justify-content-center mt-2 mt-md-0">
                             <button class="btn btn-light">Settings</button>
                         </div>
                     </div>