html - 内容在容器内，但背景和边框在容器外

我将如何使边框沿视口的整个宽度延伸，而不是卡在容器内。有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>

最佳答案

删除类为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>