CSS - 覆盖子级的父ID

Question

我在网站上有一个部分，其中父ID样式规则与我需要查看该部分的特定区域的方式相冲突。它应该是这样的 -

这是目前为止的编码版本 -

为上述文本设置的规则与h2 / p文本应如何显示“CASE STUDY”相矛盾，我需要将其推向左侧，图像保持在右侧，与文本对齐。我需要克服父规则，但我尝试了一些不同的东西而没有。另外，我不确定为什么背景颜色不会在整个页面上拉伸。这是迄今为止的代码 -

/* CASE STUDY */

section#casestudy {
    height: 750px;
    max-width: 100%;

}

section#casestudy div.row {

    height: 250px;
    max-width: 100%;
    text-align: center;
    position: relative;
}

section#casestudy .four {
  position: relative;
  max-width: 100%;
  display: inline-block;
  margin: 0 auto;
}

#casestudy h4 {


    color: #000000;
    font-size: 20px;
    padding-top: 50px;
    line-height: 5px;
}

section#casestudy p {

    font-size: 10px;
    color: #bdc3c7;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%)
}


#council div.row  {

    display: block;
    background-color: #d3d3d3;
    width: 960px;

}

#council img {
    float: right;
}

#council h2 {

    font-size: 20px;
    text-align: left;
    color: #000000;

}

#council div.row p {
    font-size: 10px;
    text-align: left;
    width: 50%;
}


.four h3 {
  position: absolute;
  color: #FFF;
  font-size: 20px;
  margin: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

section#casestudy img {

    display: block;
    margin-left: 20px;
    padding: 10px;


}

<section id="casestudy">
        <div class="container">
            <div class="twelve columns">
                <div class="row" id="meettheteam">
                    <h3>WHAT IS 2D ANIMATION?</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel ex nisl. Vestibulum vitae ultricies nisl. Praesent sodales, leo at pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci. Suspendisse potenti. Quisque facilisis mauris in vestibulum tempor. Suspendisse nec venenatis nisi. Phasellus sodales viverra ante quis efficitur. Pellentesque quis orci mi. Phasellus tempus, sapien ut luctus pellentesque, lacus risus accumsan lorem, in porta urna tellus ac nibh. Nunc varius elit non diam vehicula aliquet. In eget urna id orci molestie pulvinar.</p>
                </div>
            </div>    
            <div id="council">
                <div class="twelve columns">
                    <div class="row">
                        <h4>LATEST CASE STUDY</h4> 
                        <h2>Wakefield Council</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel ex nisl. Vestibulum vitae ultricies nisl. Praesent sodales, leo at pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci.
                        <br>
                        Suspendisse potenti. Quisque facilisis mauris in vestibulum tempor. Suspendisse nec venenatis nisi. Phasellus sodales viverra ante quis efficitur. Pellentesque quis orci mi.
                        </p>

                        <img src="images/VIDEO.jpg" alt="Video" style="width: 300px; , height: 100px;" >
                    </div>    
                </div>    
            </div>             


            <div class="row"> 
                <div class="four columns"> 
                    <div id="video">      
                        <h3>VIDEO</h3>
                        <img src="images/VIDEO.jpg" alt="Video" style="width:300px;height:150px;">
                    </div>
                </div>
                <div class="four columns"> 
                    <div id="blog">   
                        <h3>BLOG</h3>
                        <img src="images/blog.jpg" alt="blog" style="width:300px;height:150px;">
                    </div>    
                </div>
                <div class="four columns"> 
                    <div id="faq"> 
                        <h3>FAQ</h3>
                        <img src="images/faq.jpg" alt="FAQ" style="width:300px;height:150px;">
                    </div>   
                </div>
            </div> 
        </div>                
    </section>

任何协助/指导表示赞赏。