如何调整博客主体与侧边组件宽度，使页面占满100%屏幕？

核心修改点 #

你当前页面被限制宽度是因为外层容器设置了固定最大宽度，直接修改对应CSS规则即可：

• 第一步：找到博客的CSS样式文件，或主题后台的自定义CSS编辑入口
• 第二步：定位到全局外层容器的样式，你当前站点的容器类为.container，原有规则如下：

.container {
  max-width: 1140px; /* 该属性限制了页面最大宽度，是需要修改的核心项 */
  margin: 0 auto;
  padding: 0 15px;
}

• 第三步：将max-width的属性值改为100%即可让页面占满整个屏幕，调整后参考代码：

.container {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 15px; /* 可根据需要调整左右内边距，不需要边距直接设为0 */
}

主体与侧边栏比例自定义 #

如果需要调整主体内容和侧边栏的宽度占比，分别找到对应区域的CSS规则修改宽度值即可：

• 主体内容区类名为.main-content，默认宽度约为页面的70%
• 侧边栏类名为.sidebar，默认宽度约为页面的30%

修改建议：如果没有修改原主题文件的权限，直接把调整后的CSS代码添加到主题自带的自定义CSS输入框中即可，优先级高于原有样式，后续主题更新也不会覆盖你的修改。修改前建议备份原有样式代码，避免出现异常可快速回滚。

你附的问题参考示意图如下：

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