html - 如何修复 'two' 类行右侧的边距？

Question

我正在使用 HTML5 和 CSS3 创建网站布局。

我试过将边距设置为零。也将边框设置为零，但仍然不起作用。有没有像高度(100vh)那样存在的宽度方法。类似的事情也会有所帮助

.row {
  zoom: 1;
  /* For IE 6/7 (trigger hasLayout) */
}

.two {
  text-align: center;
  background-color: aqua;
  margin: 0;
  padding: 30px;
  border-radius: 0;
  margin-right: -100px;
}

<div class="row two">
  <h2>Here’s how Babbel gets you conversational fast!</h2>
</div>

蓝色背景应覆盖窗口的整个宽度。

Answer 1

使用 body{margin: 0;} 和 box-sizing: border-box;

body{
  margin: 0;
}
* {
  box-sizing: border-box;
}
.row {
  zoom: 1;
  /* For IE 6/7 (trigger hasLayout) */
}

.two {
  text-align: center;
  background-color: aqua;
  margin: 0;
  padding: 30px;
  border-radius: 0;
/*   margin-right: -100px; */
  height: 100vh;
}

<div class="row two">
  <h2>Here’s how Babbel gets you conversational fast!</h2>
</div>