[Blog] [Ajay]: Fix the header image and author details

Author: Ajay kumar

TestArena/Blog/Common/BlogContainer.razor

@@ -10,7 +10,7 @@
 
 <style>
     .content-wrapper {
-        width: 80%; /* Leaves 20% space on left and right */
+        width: 70%; /* Leaves 20% space on left and right */
         background: white;
     }
 

TestArena/Blog/Common/Header.razor

@@ -16,7 +16,10 @@
         padding: 20px 0;
     }
 
-    .container-fluid, .row, .col-md-12, .col-6 {
+    .container-fluid,
+    .row,
+    .col-md-12,
+    .col-6 {
         padding: 0 !important;
         margin: 0 !important;
     }
@@ -41,19 +44,17 @@
             <div class="container-fluid">
                 <div class="row">
                     <!-- Author on the left -->
-                    <div class="col-6 d-flex justify-content-start">
+                    <div class="col-md-6 col-xs-12 d-flex justify-content-md-start justify-content-center">
                         <span class="text-secondary fw-bold">Author(s): </span>
                         <span class="text-secondary fw-bold ms-1">@Authors</span>
                     </div>
 
                     <!-- Published date on the right -->
-                    <div class="col-6 d-flex justify-content-end">
+                    <div class="col-md-6 col-xs-12 d-flex justify-content-md-end justify-content-center">
                         <span class="text-muted fw-bold">Published On: @PublishedOn.ToString("dd MMM yyyy")</span>
                     </div>
                 </div>
             </div>
         </div>
     </div>
-
-
 </header>