将10px添加到居中的页面的左侧和右侧

Question

我的页面设置为100％宽度，以便我的导航栏遍历整个屏幕。但是，页面内容以及导航栏中的链接只有1000像素宽且居中。

如何在1000px页面的每一侧添加10px，以便在iPhone中查看时，文本不会一直到屏幕边缘？

即

html, body {
  width: 100%;
}

.nav-bar {
  background-color: #000;
}

.nav-bar-links {
  margin: 0 auto;
  width: 1000px;
}

page {
  margin: 0 auto;
  width: 1000px;
}

Answer 1

您可以使用padding这样的属性：

.page {
    padding-left: 10px;
    padding-right: 10px;
}

Answer 2

page {
    ...
    padding: 0 10px;
    box-sizing: border-box; /* keeps it at 1000px wide *with* padding */
}

目前尚不清楚你是否真的喜欢页面元素之外的空间。在这种情况下，在身体上使用填充物。

旁注：您的意思是.page吗？