如何缩小GitHub Pages站点主体两侧空白，拓宽内容区域？

嘿，这个问题我之前帮朋友处理过，其实不用手动改HTML，靠自定义CSS就能轻松调整两侧空白，而且完全兼容Markdown编写的页面！下面给你两种实用方案：

方案一：单个页面快速调整（适合只改某一页） #

因为Markdown支持直接嵌入HTML代码，你可以在目标页面的最开头（甚至标题前）添加一段自定义CSS，直接覆盖默认的容器宽度。步骤如下：

1. 打开浏览器的开发者工具（按F12），找到你页面内容的主容器元素——比如常见的类名是.container、.page-content或者.post-content（看你页面的实际结构）。
2. 在你的Markdown页面顶部插入这段代码，把类名换成你找到的那个：

<style>
/* 调整主内容容器的宽度，减少两侧空白 */
.container {
  max-width: 85%; /* 可根据需求修改，比如90%、95%，数值越大空白越小 */
  margin: 0 auto; /* 保持内容居中 */
}

/* 如果有嵌套的内容容器，也一起调整 */
.page-content {
  max-width: 85%;
}

/* 可选：针对大屏幕做适配，避免内容太宽 */
@media (min-width: 1200px) {
  .container {
    max-width: 1000px; /* 固定宽度，防止大屏幕上内容拉得太开 */
  }
}
</style>

保存后提交到GitHub，等页面更新就能看到效果了。

方案二：全局统一调整（适合所有页面） #

如果想让所有页面都缩小两侧空白，可以用Jekyll的自定义CSS功能，不用碰主题文件：

1. 在你的GitHub Pages项目根目录下，创建assets/css/custom.css文件（如果没有assets/css文件夹就新建）。
2. 在custom.css里写入和上面一样的样式代码，比如：

.container, .page-content {
  max-width: 85%;
  margin: 0 auto;
}

@media (min-width: 1200px) {
  .container {
    max-width: 1000px;
  }
}

3. 打开项目根目录的_config.yml，添加或者修改以下配置（如果用的是Minima这类官方主题，直接加就行）：

# 引入自定义CSS
custom_css:
  - assets/css/custom.css

提交所有修改后，整个站点的内容宽度就统一调整了。

小提示 #

• 如果不确定容器类名，用开发者工具的选择器点一下内容区域，就能看到对应的类名了。
• 调整max-width的数值时，建议先从85%开始试，慢慢调到你觉得舒服的宽度，避免内容太宽影响阅读体验。

内容的提问来源于stack exchange，提问作者MD XF