从中心到左右两边的条形图都达到100%相等。但最后条形图有点超出Map边界。如何使条形图达到100%，但同时又只从内部到达Map边界？
酒吧的css

body
{
  margin:0px auto;
  padding:0px;
  font-family:helvetica;
}
.progress 
{
  position: relative;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: #F2F2F2;
}
.bar 
{ 
  background-color: #819FF7; 
  width:0%; 
  height:5px; 
  border-radius: 3px;
  margin-left: 10%;
}
.percent 
{ 
  position:absolute; 
  display:inline-block; 
  top:3px; 
  left:48%; 
}
.center-screen {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  flex-direction: column;
}
#wrapper
{
  width:995px;
  padding:0px;
  margin:0px auto;
  font-family:helvetica;
  text-align:center;
}
h1
{
  text-align:center;
  font-size:35px;
  margin-top:60px;
  color:#A9BCF5;
}
h1 p
{
  text-align:center;
  margin:0px;
  font-size:18px;
  text-decoration:underline;
  color:grey;
}

Map的CSS

<style>#map
    {
        width: 1600px;
        height:850px;
        margin: 0;
        position: absolute;
        top: 48%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%)
    }
    
    #map.fullscreen {
        position: fixed;
        width:100%;
        height: 100%;
      }</style>

我试着在JSFidlle网站上创建一个演示，但它不起作用。根本不显示酒吧。
https://jsfiddle.net/q391jwdo/2/
这就是我所说的条形图超出Map边界的意思：

这就是我想做的：
在html文件中创建一个父div，并将Map和酒吧的div放入其中：

<div class="MyContainer">
  <div class='bar' id='bar1'></div>
  <div id="map"></div>
</div>

然后在酒吧的css文件中我添加了

.MyContainer
{
  width: 100%;
}

但现在该条位于屏幕的顶部。