让站点主和小部件区域位于页面中心

Question

我的网站是 www.rosstheexplorer.com。

FB 小部件对于我的小部件区域来说太大了，所以我使用下面的代码来调整页面两个部分的宽度。

 #primary.content-area {float: left;width: 70%;}
    #primary.content-area .site-main{width:100%;}
    .widget-area{float:right;width:30%;}

我还修改了 Penscratch 主题，使自定义标题和导航菜单扩展到整个页面。

所有这些变化的一个意想不到的后果是，当我缩小我的网站时，我的网站两侧的空白空间严重不平衡。

我想尝试将内容 - 区域和小部件 - 区域居中对齐。

我没有尝试任何可能的解决方案，因为我无法在 Google 上找到任何信息来模糊地为我指明正确的方向。我在 Google 上找到的所有信息都与其他主题有关，或者仅与将单个图片、文本和标题居中有关。

更新 -

我尝试了以下一项建议。现在我的代码看起来像这样 -

<div class="full-screen-template">
#primary.content-area {float: left;width: 70%;}
#primary.content-area .site-main{width:100%;}
.widget-area{float:right;width:30%;}
</div>

#page {
  margin: 0 auto;
}

<div class="mobile-template">
#primary.content-area {float: left;width: 100%;}
.widget-area{float:right;width:100%;}
</div>

不幸的是，它似乎没有解决我的问题。

Answer 1

尝试这样使内容和小部件区域居中对齐：

#page {
  margin: 0 auto;
}

更新：

我认为它不起作用的原因是您的 .css 文件中有 HTML 代码：

<div class="full-screen-template">
....
</div>

这可能会阻止浏览器继续前进，因此它永远不会到达#page 行。

我不确定您尝试在 css 文件中使用 HTML 实现什么，但请尝试将其删除以查看是否可以解决问题。