Fix: Resolve responsive layout issues on news pages

views/newsPages/newsArticle1/newsArticle1.css

@@ -35,8 +35,6 @@ a:active {
 
 /* MAIN CONTENT - ARTICLE STYLING */
 article {
-  max-width: 800px;
-  margin: 40px auto;
   padding: 30px;
   background-color: #fff;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
@@ -93,7 +91,6 @@ article h3 + p {
   /* Article responsiveness */
   article {
     padding: 15px;
-    margin: 20px auto;
   }
 
   article h1 {

views/newsPages/newsArticle1/newsArticle1.html

@@ -25,8 +25,11 @@
     <!-- Header Component -->
     <div id="header"></div>
 
-    <article>
-      <h2>TỔNG QUAN VỀ DIỄN BIẾN GIÁ KHÍ LNG TRONG 5 NĂM QUA</h2>
+    <div class="container my-4 my-md-5 overflow-hidden">
+      <div class="row justify-content-center">
+        <div class="col-12 col-md-10 col-lg-8">
+          <article class="w-100 shadow-sm rounded-3 bg-white">
+      <h1>TỔNG QUAN VỀ DIỄN BIẾN GIÁ KHÍ LNG TRONG 5 NĂM QUA</h1>
       <p>
         Trong những năm gần đây, diễn biến giá khí LNG trong 5 năm qua đã có
         những thay đổi đáng kể. Các yếu tố từ cung cầu toàn cầu đến tình hình
@@ -487,8 +490,10 @@
         đúng đắn ngay từ bây giờ sẽ giúp Việt Nam xây dựng một nền kinh tế năng
         lượng mạnh mẽ và bền vững hơn trong những năm tới.
       </p>
-    </article>
-
+          </article>
+        </div>
+      </div>
+    </div>
     <!-- Footer Component -->
     <div id="footer"></div>