css - 如何让 div 占据整个屏幕宽度？

Question

这可能很简单，但我有一些使用媒体查询来调整大小的嵌套 div。我最初将框 3 作为容器下方的单独 div，但引起了问题。所以我在容器和方框下方包含了 2 个 div。我希望这个 div 框 3 占据整个屏幕宽度。

示例如下:https://jsfiddle.net/nsnhsLjq/

也感谢任何关于改进我的代码的反馈。谢谢。

.box1 {
width: 50%;
padding: 15px;
height: 150px;
background: url(https://static.pexels.com/photos/27714/pexels-photo-27714.jpg) no-repeat center center scroll;
background-position: 50% 50%;   
background-size: 90%;
margin: 0 auto;
}

.box2 {
width: 80%;
padding: 15px;
background-color: blue;
color: #fff;
margin: 0 auto;
margin-top: 80px;
}

.box3 {
background-color: #ccc;
text-align: center;
}

<div class="container">
<div class="box1">
    <div class="box2">
        Box 2:
    </div>

    <div class="box3">
        Box 3: 
    </div>
</div>
</div>

Answer 1

https://jsfiddle.net/MarcusPls/h6sprgnm/

.box3 {
    background-color: #ccc;
    text-align: center;
  width: 100%;
  top: 100px;
  position: relative;
}

<div class="box3">
Box 3: I want this box to be below box 3 as I have it today, but I want this box to take up the entire width of the browser.
</div>

这是解决您的问题的一种方法的示例..

此外，您不需要为 <br> 使用/>换行...就像按回车键，所以只需使用“<br>”