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

Question

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

如何在不减小最大宽度的情况下向 h2 标签添加左填充。

网页代码

<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%;
}