容器内的全宽度部分

Question

首先，如果在这里有任何重复的相同类型的问题，但我已经通读了一些，并且它还没有解决我的问题，表示歉意。

继承人的代码：

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

所以我想达到的目的是让我们的服务部分，里面的东西也具有相同的宽度它在背景中的容器＃E8E8E8。

这里是想我的图像：

在此先感谢。

Answer 1

您可以通过将width:100%添加到.about-serv类来完成。

.about-serv{ 
    color:#00AED7; 
    width:100%; 
} 

Answer 2

您的HTML布局很好，但应该删除一些CSS属性。因为你使用了更多不必要的CSS属性。如果你想响应那就试试这个像

.article-wrapper { 
    width:875px; 
    margin:0 auto; 
} 
section { 
    background: #E8E8E8; 
    width: 100%; 
} 
.about-list > li { 
    list-style: none outside none; 
} 

另外：

尝试此添加此标题区

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/> 

同时添加这是你的主要风格的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%; 
} 

}