html - 需要最后一个 div 全宽

Question

我正在尝试使用 CSS 创建布局。没有什么复杂的，但无法弄清楚最后一点。

我有两行，都需要全宽。

第 1 行 - 有一个居中且 70% 宽且内容更多的 div

第 2 行 - 应在第 1 行下方全宽

由于某种原因，第 2 行似乎在第 1 行的 70% 部分内。

我知道这很简单，只是布局 CSS 的新手。

代码笔:https://codepen.io/gcollins/pen/eEMKqR

HTML:

<div id="pp-post-container-{post_id}" class="pp-post-container">
  <!-- Row 1 -->
  <div id="pp-post-main-{post_id}" class="pp-post-main">
    <div id="pp-post-content-{post_id}" class="pp-post-content">
      <div id="pp-post-video-{post_id}" class="pp-post-video"></div>
      <div id="pp-post-left-{post_id}" class="pp-post-left">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
      <div id="pp-post-right-{post_id}" class="pp-post-right">
        <div></div>
        <div></div>
      </div>
    <div>
  </div>
  <!-- Row #2 -->    
  <div id="pp-post-testimonials-{post_id}" class="pp-post-testimonials"></div>
<div>

CSS:

.pp-post-container {
  background-color: yellow;
  overflow: hidden
}

.pp-post-main {
  margin: 0px;
  padding: 0px;
  height: 300px;
  background-color:#EAEAEA;
}

.pp-post-content {
  width: 70%;
  margin: auto;
  height: 300px;  
  background-color: red;   
}

.pp-post-video {
  background-color: #000;
  height: 100px;
}

.pp-post-left, .pp-post-right {
  background-color:pink;
  display: inline-block;
  margin: 0px;
  height: 100px;
  width: 49.8%;
}

.pp-post-testimonials {
  background-color: green;
  height: 100px;
}

Answer 1

我想你可能错过了几个关闭 </div>导致 <div> 的标签有问题继承其容器的 CSS。

   <div id="pp-post-container-{post_id}" class="pp-post-container">
        <!-- Row 1 -->
        <div id="pp-post-main-{post_id}" class="pp-post-main">
          <div id="pp-post-content-{post_id}" class="pp-post-content">
            <div id="pp-post-video-{post_id}" class="pp-post-video"></div>
            <div id="pp-post-left-{post_id}" class="pp-post-left">
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
            </div>
            <div id="pp-post-right-{post_id}" class="pp-post-right">
              <div></div>
              <div></div>
            </div>
          <div>
        </div>
          </div>
        </div>
    </div>
        <!-- Row #2 -->    
        <div id="pp-post-testimonials-{post_id}" class="pp-post-testimonials"></div>
      <div>