Html 引导中的全屏宽度面包屑

我想在我的网站上显示全屏面包屑，如步骤1步骤2步骤3所示。使用箭头，还需要显示步骤1附近的图像

但问题是，面包屑只显示了屏幕的一半

/**魔法**/
.btn breadcrumb.btn:不是（：最后一个孩子）：之后{
内容：“；
显示：块；
宽度：100%；
身高：0；
边框顶部：17px实心透明；
边框底部：17px实心透明；
左边框：10px纯白；
位置：绝对位置；
最高：50%；
利润上限：-17px；
左：100%；
z指数：3；
}
.btn breadcrumb.btn:不是（：最后一个孩子）：之前{
内容：“；
显示：块；
宽度：0；
身高：0；
边框顶部：17px实心透明；
边框底部：17px实心透明；
左边框：10px实心rgb（173173173）；
位置：绝对位置；
最高：50%；
利润上限：-17px；
左边距：1px；
左：100%；
z指数：3；
}
/**间距**/
.btn面包屑.btn{
填充：6px 12px 6px 24px；
}
.btn面包屑.btn：第一个孩子{
填充：6px 6px 6px 10px；
}
最后一个孩子{
填充：6px 18px 6px 24px；
}
/**默认按钮**/
.btn breadcrumb.btn.btn默认值：不（：最后一个子项）：之后{
左边框：10px实心#fff；
}
.btn breadcrumb.btn.btn默认值：不（：最后一个子项）：之前{
左边框：10px实心#ccc；
}
.btn breadcrumb.btn.btn默认值：悬停：非（：最后一个子项）：之后{
左边框：10px实心#ebebebeb；
}
.btn breadcrumb.btn.btn默认值：悬停：非（：最后一个子项）：之前{
左边框：10px实心#adadad；
}
/**主按钮**/
.btn breadcrumb.btn.btn主：非（：最后一个子）：之后{
左边框：10px实心#428bca；
}
.btn breadcrumb.btn.btn主：非（：最后一个子）：之前{
左边框：10px实心ťEBD；
}
.btn breadcrumb.btn.btn主要：悬停：非（：最后一个子项）：之后{
左边框：10px实心#3276b1；
}
.btn breadcrumb.btn.btn主要：悬停：非（：最后一个子项）：之前{
左边框：10px实心#285e8e；
}
/**成功按钮**/
.btn breadcrumb.btn.btn成功：不是（：最后一个孩子）：之后{
左边框：10px实心#5cb85c；
}
.btn breadcrumb.btn.btn成功：不是（：最后一个孩子）：之前{
左边框：10px实心#4cae4c；
}
.btn breadcrumb.btn.btn成功：悬停：非（：最后一个子项）：之后{
左边框：10px实心#47a447；
}
.btn breadcrumb.btn.btn成功：悬停：非（：最后一个子项）：之前{
左边框：10px实心#398439；
}
/**危险按钮**/
.btn breadcrumb.btn.btn危险：不是（：最后一个孩子）：之后{
左边框：10px实心#d9534f；
}
.btn breadcrumb.btn.btn危险：不是（：最后一个孩子）：之前{
左边框：10px实心#d43f3a；
}
.btn breadcrumb.btn.btn危险：悬停：非（：最后一个孩子）：之后{
左边框：10px实心#d2322d；
}
.btn breadcrumb.btn.btn危险：悬停：非（：最后一个孩子）：之前{
左边框：10px实心#ac2925；
}
/**警告按钮**/
.btn breadcrumb.btn.btn警告：不是（：最后一个孩子）：之后{
左边框：10px实心#f0ad4e；
}
.btn breadcrumb.btn.btn警告：不是（：最后一个孩子）：之前{
左边框：10px实心#eea236；
}
.btn breadcrumb.btn.btn警告：悬停：非（：最后一个子项）：之后{
左边框：10px实心#ed9c28；
}
.btn breadcrumb.btn.btn警告：悬停：非（：最后一个子项）：之前{
左边框：10px实心#d58512；
}
/**信息按钮**/
.btn breadcrumb.btn.btn信息：不（：最后一个子项）：之后{
左边框：10px实心#5bc0de；
}
.btn breadcrumb.btn.btn信息：不（：最后一个子项）：之前{
左边框：10px实心#46b8da；
}
.btn breadcrumb.btn.btn信息：悬停：非（：最后一个子项）：之后{
左边框：10px实心#39b3d7；
}
.btn breadcrumb.btn.btn信息：悬停：非（：最后一个子项）：之前{
左边框：10px实心#269abc；
}

一点
flexbox
magic


.btn组{
显示器：flex；
}
.btn面包屑.btn{
柔性生长：1；
文本对齐：居中；
位置：相对位置；
}
/**魔法**/
.btn breadcrumb.btn:不是（：最后一个孩子）：之后{
内容：“；
显示：块；
宽度：100%；
身高：0；
边框顶部：17px实心透明；
边框底部：17px实心透明；
左边框：10px纯白；
位置：绝对位置；
最高：50%；
利润上限：-17px；
左：100%；
z指数：3；
}
.btn breadcrumb.btn:不是（：最后一个孩子）：之前{
内容：“；
显示：块；
宽度：0；
身高：0；
边框顶部：17px实心透明；
边框底部：17px实心透明；
左边框：10px实心rgb（173173173）；
位置：绝对位置；
最高：50%；
利润上限：-17px；
左边距：1px；
左：100%；
z指数：3；
}
/**间距**/
.btn面包屑.btn{
填充：6px 12px 6px 24px；
}
.btn面包屑.btn：第一个孩子{
填充：6px 6px 6px 10px；
}
最后一个孩子{
填充：6px 18px 6px 24px；
}
/**默认按钮**/
.btn breadcrumb.btn.btn默认值：不（：最后一个子项）：之后{
左边框：10px实心#fff；
}
.btn breadcrumb.btn.btn默认值：不（：最后一个子项）：之前{
左边框：10px实心#ccc；
}
.btn breadcrumb.btn.btn默认值：悬停：非（：最后一个子项）：之后{
左边框：10px实心#ebebebeb；
}
.btn breadcrumb.btn.btn默认值：悬停：非（：最后一个子项）：之前{
左边框：10px实心#adadad；
}
/**主按钮**/
.btn breadcrumb.btn.btn主：非（：最后一个子）：之后{
左边框：10px实心#428bca；
}
.btn breadcrumb.btn.btn主：非（：最后一个子）：之前{
左边框：10px实心ťEBD；
}
.btn breadcrumb.btn.btn主要：悬停：非（：最后一个子项）：之后{
左边框：10px实心#3276b1；
}
.btn breadcrumb.btn.btn主要：悬停：非（：最后一个子项）：之前{
左边框：10px实心#285e8e；
}
/**成功按钮**/
.btn breadcrumb.btn.btn成功：不是（：最后一个孩子）：之后{
左边框：10px实心#5cb85c；
}
.btn breadcrumb.btn.btn成功：不是（：最后一个孩子）：之前{
左边框：10px实心#4cae4c；
}
.btn breadcrumb.btn.btn成功：悬停：非（：最后一个子项）：之后{
左边框：10px实心#47a447；
}
.btn breadcrumb.btn.btn成功：悬停：非（：最后一个子项）：之前{
左边框：10px实心#398439；
}
/**危险按钮**/
.btn面包屑.btn.btn-dan
<div class="btn-group btn-breadcrumb">
    <a href="#" class="btn btn-default">STEP 1</a>
    <a href="#" class="btn btn-default">STEP 2</a>
    <a href="#" class="btn btn-default">STEP 3</a>
    <a href="#" class="btn btn-default">STEP 4</a>
</div>
<div class="container">
  <!-- other content -->
</div>

.btn-breadcrumb {
  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
  /* ... */
}

<div class="container">
  <div class="btn-group btn-breadcrumb">
      <a href="#" class="btn btn-default">STEP 1</a>
      <a href="#" class="btn btn-default">STEP 2</a>
      <a href="#" class="btn btn-default">STEP 3</a>
      <a href="#" class="btn btn-default">STEP 4</a>
  </div>
</div>