具有背景颜色的div的完整（响应）宽度

Question

所以我希望将蓝色div设置为每个设备的页面的整个宽度。我正在使用bootstrap 3.0，我也试图立即结束后台div。我不喜欢使用自定义宽度，因为这会让它变得很敏感。

screenshot how it looks

This is how it should look

＆＃13;

＆＃13;

body {
 overflow-x: hidden;
}

.background {
    background-color: #24a5e8;
    margin: auto;
    max-width: 100%;
}
.gratis_text{
    font-family: Segoe UI Symbol;
    color: black;

}
#gratis_h2 {
    margin-left: 24%;
}
#hr1 {
    border-color: black;
    margin-left: 24%;
    width: 39%;
}
#span1-1 {
    margin-left: 23%;
}

＆＃13;

<div class="background"> <!-- background -->
                    <div class="row"> <!-- row -->
                        <div class="col-lg-5 col-lg-offset-4 col-md-8 col-md-offset-3">
                            <div class="gratis_text">
                                <h2 id="gratis_h2">Gratis pakket</h2>
                                <hr id="hr1">
                                <span id="span1-1">Geen addertjes onder het gras! </span> <br>
                                <span>U kunt als bedrijf zich altijd GRATIS aanmelden zonder verplichtingen!</span>
                            </div>
                        </div>
                    </div> <!-- /row -->
                </div> <!-- /background -->

＆＃13;

＆＃13;

＆＃13;