CSS - overriding parent IDs for child - html

Question

I have a section on a site where the parent ID styling rules are conflicting with how I need a particular area of the section to look. This is how it should look -
And this is the coded version so far -
The rules set for the text above are conflicting with how the h2 / p text should show for the 'CASE STUDY' which I need to push to the left and the image to remain on the right, aligned with the text. I need to overcome the parent rules but I've tried a few different things and nothing. Also, I'm not sure why the background color is not stretching across the page. Here's the code so far -
/* 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>
Any assistance/guidance appreciated.