由于填充而获得水平滚动条

Question

我有一个完整的100％div，其中包含一个单独的h2标签。现在，如果我填充填充，那么在调整窗口大小时我会得到一个滚动条。这是因为填充而发生的。 div为100％宽度，最大宽度为1002px。

如何在不减小宽度max-width的情况下向h2标签添加左边距。

Html代码

<div id="content-home" class="clearfix">
  <h2>Biographies</h2>
</div>

演示 - https://jsfiddle.net/squidraj/gu8xmt1g/1/

非常感谢任何帮助。

Answer 1

.clearfix::after {
  clear: both;
  content: "";
  display: block;
  height: 0;
}

#content-home h2 {
  background: #ff2bff none repeat scroll 0 0;
  color: #fff;
  font-size: 20px;
  font-weight: normal;
  padding: 12px 0 10px 10px;
}

#content-home{
  display: inline-block;
  max-width: 1002px;
  width: 100%;
}

.container {
  display: flex;
}

<div class="container">
  <div id="content-home" class="clearfix">
  <h2>Biographies</h2>
</div>  
</div>

Answer 2

你可以降低宽度来解决这个问题

#content-home h2 {
  background: #ff2bff none repeat scroll 0 0;
  color: #fff;
  display: block;
  font-size: 20px;
  font-weight: normal;
  max-width: 1002px;
  padding: 12px 0 10px 10px;
  width: 99%;
}