Css 固定位置停止元素以填充父容器

我面临着固定位置的问题。我有两排在一起，我希望它们看起来像这样：

这就是我想要的。现在，因为我需要在项目中使用position fixed来停靠第二行，所以我将position更改为fixed。这是我的css文件：

.header {
font-weight: bold;
background-color: #4070CB;
color: #EFF0F2;
height: 5vw;
padding-top: 15px;
}

.story-board-header {
font-weight: bold;
background-color: #072e77;
color: #EFF0F2;
height: 3vw;
padding-top: 15px;
position:fixed;
}

现在我得到的是：

正如您所看到的，第二个div并没有填满它的所有容器。 这也是我的JSFIDLE：

---

有人能帮忙吗

只需使用

宽度：100%

*{
保证金：0；
填充：0；
}
.标题{
字体大小：粗体；
背景色：#4070CB；
颜色：#EFF0F2；
高度：5vw；
填充顶部：15px；
}
.故事板标题{
字体大小：粗体；
背景色：#072e77；
颜色：#EFF0F2；
高度：3vw；
填充顶部：15px；
位置：固定；
宽度：100%；
}

埃维韦韦韦韦韦韦韦韦韦韦韦韦韦韦韦韦韦韦韦韦韦韦韦韦韦韦韦韦韦韦韦韦韦韦韦韦韦韦韦韦韦韦韦韦韦韦韦韦韦韦韦韦韦韦

只需使用

宽度：100%

*{
保证金：0；
填充：0；
}
.标题{
字体大小：粗体；
背景色：#4070CB；
颜色：#EFF0F2；
高度：5vw；
填充顶部：15px；
}
.故事板标题{
字体大小：粗体；
背景色：#072e77；
颜色：#EFF0F2；
高度：3vw；
填充顶部：15px；
位置：固定；
宽度：100%；
}

埃维韦韦韦韦韦韦韦韦韦韦韦韦韦韦韦韦韦韦韦韦韦韦韦韦韦韦韦韦韦韦韦韦韦韦韦韦韦韦韦韦韦韦韦韦韦韦韦韦韦韦韦韦韦韦韦

您忘记将bootstrap.css链接到项目：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

---

您忘记将bootstrap.css链接到项目：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

---

我不能100%确定你想要完成什么

“位置固定”使元素相对于浏览器窗口而不是其容器（）

您可以同时使用

width:100%

或

left:0；右：0

使元素与整个屏幕一样宽

---

“修复”还会导致滚动页面时元素保持在位。这就是你想要的吗？

我不能100%确定你想要实现什么

“位置固定”使元素相对于浏览器窗口而不是其容器（）

您可以同时使用

width:100%

或

left:0；右：0

使元素与整个屏幕一样宽

“修复”还会导致滚动页面时元素保持在位。这就是你想要的吗