容器内的全宽部分

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

所以我想要实现的是让 OUR SERVICES 部分及其内部的所有内容与它所在的容器具有相同的宽度，并带有背景#E8E8E8。

这是我想要的图片：

提前致谢。

Answer 1

您的 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%;
}

}

Answer 2

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

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