[Blog] [Ajay]: Fix the header layout

Author: Ajay kumar

TestArena/Blog/Common/Header.razor

@@ -13,15 +13,15 @@
         padding: 20px 0;
     }
     .article-image {
-        max-width: 500px;
+        max-width: 500px !important;
         height: auto;
         border-radius: 10px;
     }
 </style>
 
 <header class="article-header">
     <h1 class="fw-bold">@Title</h1>
-    <img src="@Image" alt="Article Banner" class="img-fluid rounded mx-auto d-block my-3">
+    <img src="@Image" alt="Article Banner" height="200" width="auto" class="img-fluid rounded mx-auto d-block my-3 article-image">
 </header>
 
 @* <div class="row"> *@

TestArena/Layout/MainLayout.razor

@@ -6,15 +6,26 @@
 
     <main>
         <header class="bg-primary text-white p-3 d-flex align-items-center">
-            <div class="logo">
-                <h3 class="m-0">Dev Arena</h3>
-            </div>
-            <div class="search-bar text-center">
-                <input type="text" class="form-control w-75 mx-auto" placeholder="Search...">
-            </div>
-            <div class="settings">
-                <button class="btn btn-light">Settings</button>
+            <div class="container-fluid">
+                <div class="row">
+                    <div class="col-12 col-md-4">
+                        <div class="logo">
+                            <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...">
+                        </div>
+                    </div>
+                    <div class="col-12 col-md-4">
+                        <div class="settings d-flex justify-content-end">
+                            <button class="btn btn-light">Settings</button>
+                        </div>
+                    </div>
+                </div>
             </div>
+            
         </header>
 
         <article class="content px-4">

TestArena/Layout/NavMenu.razor

@@ -7,17 +7,17 @@
 @* $1$     </div> #1# *@ 
 @* $1$ </div> #1# *@
 
-<header class="bg-primary text-white p-3 d-flex align-items-center">
-    <div class="logo">
-        <h3 class="m-0">Tech Blog</h3>
-    </div>
-    <div class="search-bar text-center">
-        <input type="text" class="form-control w-75 mx-auto" placeholder="Search...">
-    </div>
-    <div class="settings">
-        <button class="btn btn-light">Settings</button>
-    </div>
-</header>
+@* <header class="bg-primary text-white p-3 d-flex align-items-center"> *@
+@*     <div class="logo"> *@
+@*         <h3 class="m-0">Tech Blog</h3> *@
+@*     </div> *@
+@*     <div class="search-bar text-center"> *@
+@*         <input type="text" class="form-control w-75 mx-auto" placeholder="Search..."> *@
+@*     </div> *@
+@*     <div class="settings"> *@
+@*         <button class="btn btn-light">Settings</button> *@
+@*     </div> *@
+@* </header> *@
 
 @* <div class="@NavMenuCssClass nav-scrollable" @onclick="ToggleNavMenu"> *@
 @*     <nav class="flex-column"> *@