html - 覆盖容器中的填充和边距

Question

我在页面中有一个特定的点，我希望这个部分是容器 div 的 100% 宽度。正如您在下图中看到的，左边的空白是填充，.article-wrapper-pro 的一个属性，基本上我希望它被覆盖所以没有填充？

代码:

<div class="article-wrapper-pro">
  <div class="row">
    <div class="small-12 medium-8 columns about-border">
      <article class="padd">
        <h3 class="about-intro">YADDA YADDDA YADDA</h3>
        <p>YADDA YADDDA YADDAYADDA YADDDA YADDAYADDA YADDDA YADDAYADDA YADDDA YADDAYADDA YADDDA YADDA</p>
        <p>YADDA YADDDA YADDAYADDA YADDDA YADDAYADDA YADDDA YADDA</p>
        <h2>Take a look</h2>
        <div class="about-images">
          <img src="img/oakview-screen.jpg" alt="e" </img>
        </div>
      </article>
      <div class="work-with-us">
        <h2 class="about-serv">Work with us</h2>
        <p>IYADDA YADDDA YADDAYADDA YADDDA YADDA</p>
      </div>
    </div>
    <div class="medium-4 columns about-images show-for-medium-up project-side">
      <img class="project-logos" src="img/oakview-logo.jpg" alt="Oak View Logo" </img>
      <div class="side-section">
        <h3 class="about-side-headings">Services</h3>
        <div class="about-list-side">
          <ul>
            <li>YADDA YADDDA YADDA</li>
            <li>YADDA YADDDA YADDA</li>
            <li>YADDA YADDDA YADDA</li>
          </ul>
        </div>
        <h3 class="about-side-headings">YADDA YADDDA YADDA</h3>
        <div class="about-list-side">
          <ul>
            <li>YADDA YADDDA YADDA</li>
            <li>YADDA YADDDA YADDA</li>
            <li>YADDA YADDDA YADDA</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

使用负边距。

考虑以下场景:

HTML:

<div class="container">
    <div class="box-to-override">
    </div>
</div>

CSS:

.container {
    width: 500px;
    background: red;
    padding-left: 40px;
    padding-top: 100px; /* Only to demonstrate */
}

.box-to-override {
    margin-left: -40px;
    background: #CCC;
    min-height: 300px; /* Only to demonstrate */;
}

.box-to-override 类中的 margin-left 使 div 扩展到 .container 中设置的填充。

这是 FIDDLE