容器内部的内容，但容器外的背景和边框

Question

如何使边框运行视口的全宽，而不是卡在容器内。有2种不同的颜色。

问题是我无法仅在容器内获得整个视口的内联边框颜色。

https://jsfiddle.net/DTcHh/8039/

CSS

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

header .col-sm-8, header .col-sm-4, header .col-sm-6 {
    padding: 0;
}
.container-full {
    width: 100%;
    margin: 0 auto;
    background: linear-gradient(90deg, #c9dee3 50%, #f4f9f5 50%);
}

.green {
    background: #f4f9f5;
    border-top: 7px solid #a9cab3;
    border-left: 7px solid #a9cab3;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.blue {
    background: #c9dee3;
    border-top: 7px solid #70c9d9;
    height: 150px;
    display: flex;
}

.blue .col-sm-6 {
    display: flex;
    justify-content: center;
    align-items: center;
}

HTML

<header>
    <div class="container-full">
        <div class="container">
            <div class="row">
                <div class="col-sm-8">
                    <div class="blue">
                        <div class="col-sm-6">
                            something will go in here
                        </div>
                        <div class="col-sm-6">
                            something will go in here
                        </div>
                    </div>
                </div>

                <div class="col-sm-4">
                    <div class="green">
                        something will go in here
                    </div>
                </div>

            </div>
        </div>
    </div>
</header>

Answer 1

使用班级container

删除div

<header>
<div class="container-full">
        <div class="row">
            <div class="col-sm-8">
                <div class="blue">
                    <div class="col-sm-6">
                        something will go in here
                    </div>
                    <div class="col-sm-6">
                        something will go in here
                    </div>
                </div>
            </div>

            <div class="col-sm-4">
                <div class="green">
                    something will go in here
                </div>
            </div>

        </div>
    </div>