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

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上找到任何信息来模糊地指出我正确的方向。我在谷歌上找到的所有信息都与其他主题有关，或者只是与将单个图片、文本和标题居中有关。

更新-

我尝试了下面的一个建议。现在我的代码看起来像这样——

<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;
}

更新：

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

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

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

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