html - Need last div full width -

i trying create layout css. nothing complicated can't figure out last bit.

i have 2 rows , need both go full width.

row 1 - has div centered , 70% wide more content

row 2 - should go full width below row 1

for reason row 2 seems inside of 70% section in row 1.

i know simple, new laying out css.

codepen: 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; } 

i think maybe missing couple of closing </div> tags causing <div>in question inherit css of container.

   <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>