如何使div横跨整个屏幕宽度

我做了一个小项目,但我似乎没有把我的css做对…我需要我的头div(我使用了一个普通的div而不是实际的头,因为我想要身体中的一切)。我想让蓝色的标题横扫我的整个屏幕,但我不知道该怎么做。我尝试了一些有边距和填充的东西,但就是这样。

我也试着把这些按钮放在Div的底部,但似乎没能把它弄对。。。

截图: http://prntscr.com/9slfw2 描述:请在此处查看我的网站

CSS:

body {
    margin: 0px;
    padding: 0px;
}

ul {
    list-style-type: none;
}

.page-header{
    background-color: #0094ff;
    margin-top: 0px;
    display: block
}


.panel, .list-group-item, .btn {
    border-color: #0094ff;
}

#btnRegister {
    margin-right: 10px;
    vertical-align: bottom;
}

.input-group-addon {
    min-width: 40px;
}

legend.scheduler-border {
    width:inherit;
    padding:0 10px;
    border-bottom:none;
}

HTML:

<!-- Carousel -->
<div id="homeCarousel" class="carousel slide">
    <!-- Menu -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <!-- Items -->
    <div class="carousel-inner">

        <!-- Item 1 -->
        <div class="item active">
            <img class="c_img" src="~/Images/chevy.jpg" />
            <div class="container">
                <div class="carousel-caption">
                    <h1>Contact</h1>
                    <p style="background-color:#428bca;">Om gemakkelijk met Rent-a-Car contact op te nemen kunt u ook bellen!</p>
                    <p style="background-color:#428bca;">Tel: 0534891034, Adres: Vuurnatieweg 69420</p>
                    <p>
                        <a class="btn btn-lg btn-primary" href="~/Home/Contact" >Klik hier voor meer contact informatie!</a>
                    </p>
                </div>
            </div>
        </div>

        <!-- Item 2 -->
        <div class="item">
            <img class="c_img" src="~/Images/42-RT-76.jpg" />
            <div class="container">
                <div class="carousel-caption">
                    <h1>Changes to the Grid</h1>
                    <p style="background-color:#428bca;">Bootstrap 3 still features a 12-column grid, but many of the CSS class names have completely changed.</p>
                    <p style="background-color:#428bca;"><a class="btn btn-large btn-primary" href="#">Learn more</a></p>
                </div>
            </div>
        </div>

    </div>
    <!-- Controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
        <span class="icon-prev"></span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
        <span class="icon-next"></span>
    </a>
    <div id="carouselButtons">
        <button id="playButton" type="button" class="btn btn-default btn-xs">
            <span class="glyphicon glyphicon-play"></span>
        </button>
        <button id="pauseButton" type="button" class="btn btn-default btn-xs">
            <span class="glyphicon glyphicon-pause"></span>
        </button>
    </div>
</div>

<script type="text/javascript">
    $(function () {
    $('#homeCarousel').carousel({
        interval:5000,
        pause: "false"
    });
    $('#playButton').click(function () {
        $('#homeCarousel').carousel('cycle');
    });
    $('#pauseButton').click(function () {
        $('#homeCarousel').carousel('pause');
    });
});
</script>

编辑:HTML代码和……我正在使用Bootstrap,所以你知道