将包装类直接应用于元素而不是周围的 div？

Question

首先，这是我的 HTML

<div class="header">
  <div class="wrapper">
    <div class="navi">
      <a href="#" class="logo">Logo</a>
      <ul><!--
        --><li><a href="#" class="navlink">Link 1</a></li><!--
        --><li><a href="#" class="navlink">Link 2</a></li><!--
      --></ul>
    </div>
  </div>
</div>

<div class="wrapper">
  <div class="content">
    <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
  </div>
</div>

和CSS

.wrapper {
    width: 90%;
    max-width: 50em;
    margin: 0 auto;
}

.header,
.navi {
    width: 100%;
}

.header {
    background: grey;
}

.navi {
    background: green;
    display: table;
    text-align: center;
}

.navi ul {
    display: table-cell;
    vertical-align: middle;
    text-align: right;
}

.navi li {
    background: orange;
    display: inline;
    margin-left: 10px;
}

.navilink {
    display: inline-block;
    width: auto;
}

.logo {
    background: red;
    float: left;
}

.content {
    width: 100%;
    background: fuchsia;
}

Fiddle
Fullscreen Fiddle

你看，包装器确保内容和视口边缘之间始终存在某种间隙，并且超过某个点（50 em），.wrapper 不会再超过。

我在此处发布的代码有效，但我想知道是否有机会摆脱 <div class="wrapper"> 以获得相同的结果。我已经尝试将 .wrapper 类直接应用于元素，但这不起作用 - 为什么？

澄清一下：我的目标是使标记更清晰。这就是为什么我对解决方案感兴趣，然后确保元素的行为类似于我发布的示例中的行为，但不使用<div class="wrapper">。当然，.wrapper 类必须保留，只是 div 让我印象深刻。这就是为什么我尝试将.wrapper 直接添加到元素中。

Answer 1

去掉包装div，将两个CSS属性添加到内容div..

.content { 
margin: 0 auto;
max-width: 50em;
}