css - 调整浏览器大小时，标题导航填充会折叠

Question

我正在尝试设置一个简单的标题，以便在重新调整浏览器大小时，左/右填充使标题内容远离窗口边缘。这对左侧有效，但在右侧，填充似乎折叠起来，内容部分被遮盖。

这是我的 HTML:

<header id="header-container">
  <div class="header-table-wrap">
    <div class="header-table">
      <div class="nav-wrap header-table-cell cell1">
        <nav class="navigation">NAV CONTAINER</nav>
      </div>
      <div class="nav-wrap header-table-cell cell2">
        <nav class="navigation">NAV CONTAINER</nav>
      </div>
    </div>
  </div>
</header>

还有 CSS:

body {margin:0;}

.cell2 {text-align:right}
.header-table-wrap { background-color: orange; }
.header-table { background-color: yellow;}
.header-table-cell { background-color: #bbb; }

.header-table {
  display: table;
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}

.header-table-cell {
  display: table-cell;
  vertical-align: top;
}

.nav-wrap { padding: 20px 0; }

我还在 codepen 上设置了标题:http://codepen.io/dgwyer/pen/ByWNYZ

Answer 1

Demo

.header-table {
  display: table;
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  box-sizing:border-box; /* add this (box-model)*/
}

有关 box-sizing 的更多信息，请参阅 css-tricks