进一步缩小横向Banner在大屏幕上的宽度

- 将最大宽度从 max-w-7xl (1280px) 改为 max-w-4xl (896px)
- 添加垂直内边距 (py-2) 让Banner与页面内容有适当间距
- 保持圆角和阴影效果

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

components/HorizontalBanner.tsx

@@ -26,26 +26,28 @@ export default function HorizontalBanner() {
   }
 
   return (
-    <div className="w-full bg-gray-100">
-      {/* 横向 Banner - 7:1 比例 */}
-      <a 
-        href={getAdLink()}
-        target="_blank"
-        rel="noopener noreferrer"
-        className="block relative w-full bg-gray-200 overflow-hidden hover:opacity-90 transition-opacity duration-300 cursor-pointer"
-        style={{
-          aspectRatio: '7/1'
-        }}
-      >
-        {/* 实际广告图片 */}
-        <Image 
-          src="/banner.png"
-          alt="横幅广告"
-          fill
-          className="object-cover"
-          priority
-        />
-      </a>
+    <div className="w-full bg-gray-100 py-2">
+      <div className="max-w-4xl mx-auto px-4">
+        {/* 横向 Banner - 7:1 比例 */}
+        <a 
+          href={getAdLink()}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="block relative w-full bg-gray-200 overflow-hidden hover:opacity-90 transition-opacity duration-300 cursor-pointer rounded-lg shadow-sm"
+          style={{
+            aspectRatio: '7/1'
+          }}
+        >
+          {/* 实际广告图片 */}
+          <Image 
+            src="/banner.png"
+            alt="横幅广告"
+            fill
+            className="object-cover"
+            priority
+          />
+        </a>
+      </div>
     </div>
   );
 }