diff --git a/css/index.css b/css/index.css
index 0ab10d8..0fc2d20 100644
--- a/css/index.css
+++ b/css/index.css
@@ -14,6 +14,12 @@
   min-height: 100vh;
 }
 
+/* 首页 section-content 统一左右边距为 20px */
+#index .section-content {
+  padding-left: var(--container-padding-x);
+  padding-right: var(--container-padding-x);
+}
+
 /* 首页 Header 深色玻璃态覆盖 */
 #index #header {
   background: transparent;
@@ -343,7 +349,7 @@
 .banner .banner-s .banner-list {
   display: flex;
   flex-wrap: wrap;
-  padding: 0;  /* 移除额外的 padding，使用 section-content 的统一边距 */
+  padding: 0 !important;  /* 移除额外的 padding，使用 section-content 的统一边距 */
 }
 
 .banner-s .banner-list .banner-item {
@@ -1363,9 +1369,7 @@ html {
     font-size: 64px;
   }
 
-  .banner-cont .swiper-slide .section-content {
-    max-width: 700px;
-  }
+  /* 移除 section-content 的 max-width 限制，保持容器系统统一 */
 
   .section-title h2 {
     font-size: 44px;
diff --git a/debug-alignment.html b/debug-alignment.html
new file mode 100644
index 0000000..1cae409
--- /dev/null
+++ b/debug-alignment.html
@@ -0,0 +1,217 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>对齐调试工具</title>
+    <style>
+        body {
+            margin: 0;
+            padding: 20px;
+            font-family: monospace;
+        }
+        .debug-info {
+            background: #f0f0f0;
+            padding: 15px;
+            margin-bottom: 20px;
+            border-radius: 5px;
+        }
+        .element-box {
+            margin: 10px 0;
+            padding: 10px;
+            background: white;
+            border-left: 3px solid #38BDF8;
+        }
+        .highlight {
+            color: #38BDF8;
+            font-weight: bold;
+        }
+        button {
+            padding: 10px 20px;
+            background: #38BDF8;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            font-size: 14px;
+        }
+        button:hover {
+            background: #0EA5E9;
+        }
+        .ruler {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 2px;
+            height: 100vh;
+            background: red;
+            z-index: 9999;
+            pointer-events: none;
+        }
+        .label {
+            position: fixed;
+            top: 50%;
+            background: red;
+            color: white;
+            padding: 2px 5px;
+            font-size: 12px;
+            z-index: 9999;
+        }
+    </style>
+</head>
+<body>
+    <div class="debug-info">
+        <h2>🔍 首页对齐调试工具</h2>
+        <p>此工具帮助你检查导航菜单、轮播图文案、云服务器卡片的左对齐情况</p>
+        <button onclick="checkAlignment()">检查对齐</button>
+        <button onclick="showRulers()">显示参考线</button>
+        <button onclick="clearRulers()">清除参考线</button>
+    </div>
+
+    <div id="results"></div>
+
+    <script>
+        function checkAlignment() {
+            // 清空之前的结果
+            document.getElementById('results').innerHTML = '';
+
+            // 获取元素
+            const navMenu = document.querySelector('.nav-menu');
+            const navFirstItem = document.querySelector('.nav-menu .nav-item');
+            const bannerContent = document.querySelector('.banner-cont .swiper-slide .section-content');
+            const cloudBox = document.querySelector('#cloud-box');
+
+            const elements = [
+                { name: 'nav-menu容器', el: navMenu },
+                { name: 'nav-menu第一个菜单项', el: navFirstItem },
+                { name: '轮播图文案容器', el: bannerContent },
+                { name: 'cloud-box卡片', el: cloudBox }
+            ];
+
+            let html = '<div class="debug-info"><h3>对齐检查结果：</h3>';
+
+            elements.forEach(item => {
+                if (item.el) {
+                    const rect = item.el.getBoundingClientRect();
+                    const computed = window.getComputedStyle(item.el);
+
+                    html += `
+                        <div class="element-box">
+                            <strong>${item.name}</strong><br>
+                            距离视口左边缘: <span class="highlight">${rect.left.toFixed(2)}px</span><br>
+                            padding-left: ${computed.paddingLeft}<br>
+                            margin-left: ${computed.marginLeft}<br>
+                            实际内容左边距: <span class="highlight">${(rect.left + parseFloat(computed.paddingLeft)).toFixed(2)}px</span>
+                        </div>
+                    `;
+                } else {
+                    html += `
+                        <div class="element-box" style="border-color: #ccc;">
+                            <strong>${item.name}</strong><br>
+                            <span style="color: #999;">未找到元素</span>
+                        </div>
+                    `;
+                }
+            });
+
+            // 计算是否对齐
+            if (navFirstItem && cloudBox && bannerContent) {
+                const navLeft = navFirstItem.getBoundingClientRect().left;
+                const cloudLeft = cloudBox.getBoundingClientRect().left;
+                const bannerLeft = bannerContent.getBoundingClientRect().left + parseFloat(window.getComputedStyle(bannerContent).paddingLeft);
+
+                const diff1 = Math.abs(navLeft - cloudLeft);
+                const diff2 = Math.abs(navLeft - bannerLeft);
+                const diff3 = Math.abs(cloudLeft - bannerLeft);
+
+                html += '<div class="debug-info" style="background: #e8f5e9;">';
+                html += '<h3>对齐分析：</h3>';
+                html += `nav-menu vs cloud-box 差异: <span class="highlight">${diff1.toFixed(2)}px</span> ${diff1 < 1 ? '✅ 对齐' : '❌ 未对齐'}<br>`;
+                html += `nav-menu vs 轮播图文案 差异: <span class="highlight">${diff2.toFixed(2)}px</span> ${diff2 < 1 ? '✅ 对齐' : '❌ 未对齐'}<br>`;
+                html += `cloud-box vs 轮播图文案 差异: <span class="highlight">${diff3.toFixed(2)}px</span> ${diff3 < 1 ? '✅ 对齐' : '❌ 未对齐'}<br>`;
+                html += '</div>';
+            }
+
+            html += '</div>';
+            document.getElementById('results').innerHTML = html;
+        }
+
+        function showRulers() {
+            clearRulers();
+
+            const navFirstItem = document.querySelector('.nav-menu .nav-item');
+            const cloudBox = document.querySelector('#cloud-box');
+            const bannerContent = document.querySelector('.banner-cont .swiper-slide .section-content');
+
+            if (navFirstItem) {
+                const left = navFirstItem.getBoundingClientRect().left;
+                const ruler = document.createElement('div');
+                ruler.className = 'ruler';
+                ruler.style.left = left + 'px';
+                ruler.id = 'ruler-nav';
+
+                const label = document.createElement('div');
+                label.className = 'label';
+                label.style.left = (left + 5) + 'px';
+                label.textContent = 'nav-menu';
+                label.id = 'label-nav';
+
+                document.body.appendChild(ruler);
+                document.body.appendChild(label);
+            }
+
+            if (cloudBox) {
+                const left = cloudBox.getBoundingClientRect().left;
+                const ruler = document.createElement('div');
+                ruler.className = 'ruler';
+                ruler.style.left = left + 'px';
+                ruler.style.background = 'blue';
+                ruler.id = 'ruler-cloud';
+
+                const label = document.createElement('div');
+                label.className = 'label';
+                label.style.left = (left + 5) + 'px';
+                label.style.background = 'blue';
+                label.style.top = '55%';
+                label.textContent = 'cloud-box';
+                label.id = 'label-cloud';
+
+                document.body.appendChild(ruler);
+                document.body.appendChild(label);
+            }
+
+            if (bannerContent) {
+                const computed = window.getComputedStyle(bannerContent);
+                const left = bannerContent.getBoundingClientRect().left + parseFloat(computed.paddingLeft);
+                const ruler = document.createElement('div');
+                ruler.className = 'ruler';
+                ruler.style.left = left + 'px';
+                ruler.style.background = 'green';
+                ruler.id = 'ruler-banner';
+
+                const label = document.createElement('div');
+                label.className = 'label';
+                label.style.left = (left + 5) + 'px';
+                label.style.background = 'green';
+                label.style.top = '60%';
+                label.textContent = '轮播文案';
+                label.id = 'label-banner';
+
+                document.body.appendChild(ruler);
+                document.body.appendChild(label);
+            }
+        }
+
+        function clearRulers() {
+            ['ruler-nav', 'ruler-cloud', 'ruler-banner', 'label-nav', 'label-cloud', 'label-banner'].forEach(id => {
+                const el = document.getElementById(id);
+                if (el) el.remove();
+            });
+        }
+
+        // 页面加载后自动检查
+        window.addEventListener('load', () => {
+            setTimeout(checkAlignment, 1000);
+        });
+    </script>
+</body>
+</html>
