Full Width section within a container - html

Question

Firstly, apologies if there are any duplicates of the same sort of problem on here but i have read through a few and it hasn't resolved my problem.
Heres the code:
<div class="article-wrapper">
<div class="row">
<div class="small-12 large-7 columns">
<article>
<h2>What we do.</h2>
<div class="about-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel nisl ullamcorper, volutpat felis sed, volutpat tortor. Quisque eu interdum elit, et viverra justo. Pellentesque lacinia tellus sed vehicula convallis. Etiam dapibus leo eget condimentum varius. Proin pretium malesuada leo, vel faucibus urna elementum vitae. Donec sodales quam eu pellentesque tristique. Duis ultricies est at lobortis dictum. Nam ornare neque et justo facilisis, eget convallis velit interdum. Quisque eu eros id lectus sagittis porta. Aenean et mi nec eros vehicula fringilla et non libero. Donec sed auctor lacus. Sed accumsan egestas ante, id sollicitudin ligula. Phasellus tellus neque, rutrum id lacus et, posuere viverra arcu.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel nisl ullamcorper, volutpat felis sed, volutpat tortor. Quisque eu interdum elit, et viverra justo. Pellentesque lacinia tellus sed vehicula convallis. Etiam dapibus leo eget condimentum varius. Proin pretium malesuada leo, vel faucibus urna elementum vitae. Donec sodales quam eu pellentesque tristique. Duis ultricies est at lobortis dictum. Nam ornare neque et justo facilisis, eget convallis velit interdum. Quisque eu eros id lectus sagittis porta. Aenean et mi nec eros vehicula fringilla et non libero. Donec sed auctor lacus. Sed accumsan egestas ante, id sollicitudin ligula. Phasellus tellus neque, rutrum id lacus et, posuere viverra arcu./p></div>
<h2>It's all about you.</h2>
<div class="about-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel nisl ullamcorper, volutpat felis sed, volutpat tortor. Quisque eu interdum elit, et viverra justo. Pellentesque lacinia tellus sed vehicula convallis. Etiam dapibus leo eget condimentum varius. Proin pretium malesuada leo, vel faucibus urna elementum vitae. Donec sodales quam eu pellentesque tristique. Duis ultricies est at lobortis dictum. Nam ornare neque et justo facilisis, eget convallis velit interdum. Quisque eu eros id lectus sagittis porta. Aenean et mi nec eros vehicula fringilla et non libero. Donec sed auctor lacus. Sed accumsan egestas ante, id sollicitudin ligula. Phasellus tellus neque, rutrum id lacus et, posuere viverra arcu.</p></div>
<h2>In brief</h2>
<div class="about-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel nisl ullamcorper, volutpat felis sed, volutpat tortor. Quisque eu interdum elit, et viverra justo. Pellentesque lacinia tellus sed vehicula convallis. Etiam dapibus leo eget condimentum varius. Proin pretium malesuada leo, vel faucibus urna elementum vitae. Donec sodales quam eu pellentesque tristique. Duis ultricies est at lobortis dictum. Nam ornare neque et justo facilisis, eget convallis velit interdum. Quisque eu eros id lectus sagittis porta. Aenean et mi nec eros vehicula fringilla et non libero. Donec sed auctor lacus. Sed accumsan egestas ante, id sollicitudin ligula. Phasellus tellus neque, rutrum id lacus et, posuere viverra arcu.</p>
</div>
</article>
</div>
</div>
<section>
<div class="row" id="serv-wrapper">
<div class="small-12 large-5 columns">
<h2 class="about-serv">Our Services</h2>
<ul class="about-list">
<li>LINK</li>
<li>LINK</li>
<li>LINK</li>
<li>LINK</li>
<li>LINK</li>
<li>LINK</li>
<li>LINK</li>
</ul>
</div>
</div>
</section>
</div>
CSS:
.article-wrapper {
padding: 1.5em 6.25%;
}
.about-text{
border-top-width: 100%;
border-top: 1px solid #e5e5e5;
}
.about-serv{
color:#00AED7;
}
ul.aboutlist {
list-style: none;
padding:0;
margin:0;
}
ul li.aboutlist {
padding-left: 1em;
text-indent: -.7em;
margin-top:1em;
}
ul li:before.aboutlist {
content: "º ";
color:#00AED7/* or whatever color you prefer */
}
section {
display: block;
background: #E8E8E8;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
width: 100% !important;
z-index: 0;
}
/* END ABOUT */
So what I would like to achieve is to have the OUR SERVICES section and everything inside it to have the same width as the container it is in with a background #E8E8E8.
Here is an image of what i'd like:
Thanks in advance.

Answer 1

Your HTML layout is fine but should be remove some CSS property. Because of you use more unnecessary CSS property.
Try this:
.article-wrapper {
width:875px;
margin:0 auto;
}
section {
background: #E8E8E8;
width: 100%;
}
.about-list > li {
list-style: none outside none;
}
Also if you want to responsive then try this like that: add this header area
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
Also add this your main style css:
#media only screen and (min-width: 320px) and (max-width: 480px) {
.article-wrapper {
width:100%;
padding:0;
}
#serv-wrapper {
margin: 0 auto;
width: 90%;
}
}

Answer 2

You can do it by adding width:100% to .about-serv class.
.about-serv{
color:#00AED7;
width:100%;
}