如何制作背景和边框整个视口，但将内容保留在容器内

Question

如何使背景颜色和边框拉伸整个视口宽度，但将内容保留在容器内。

https://jsfiddle.net/DTcHh/7808/

所以基本上我需要背景和边框来拉伸整个视口宽度但是将内容保持在不同的颜色内

HTML：

<header>
<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>

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;
}

.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;
}

Answer 1

希望这就是你要找的东西！

HTML：

<header>
    <div class="container">
        <div class="row">
            <div class="col-md-8">
                <div class="blue">
                    <div class="col-md-6">
                        column 1.1
                    </div>
                     <div class="col-md-6">
                        column 1.2
                    </div>
                </div>
            </div>

            <div class="col-md-2">
                <div class="green">
                    column 2.1
                </div>
            </div>

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

CSS：

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

header {
    padding: 0;
}

.container {
    width: 100%;
}

.green {
    background: #f4f9f5;
    border: 7px solid #a9cab3;
    height: 150px;
    text-align: center;
}

.blue {
    background: #c9dee3;
    border: 7px solid #70c9d9;
    height: 150px;
    text-align: center;
}