滚动显示的固定定位Banner宽度与页面其他Row元素不一致的问题求助

我们有个分公司的网站，滚动页面时会弹出一个Logo横幅。他们是用WordPress的免费插件实现的，但这个插件没法更新，有点棘手。我打算用HTML、CSS、JavaScript（哦对了还顺手加了Bootstrap，其实我也没太想明白为啥要用）来复刻这个静态页面。

结果卡在了这个滚动显示的横幅上——它能正常按条件显示，但宽度总是和页面里其他<div>/<rows>内容对不上，要么太宽要么太窄。

这是我写的代码片段：

JavaScript 代码 #

window.onscroll = function() { scrollFunction()};

function scrollFunction(){
  console.log(document.documentElement.scrollTop);
  if (document.documentElement.scrollTop > 100){
    console.log('groter');
    document.getElementById("stayontop").classList.add('show'); 
    document.getElementById("stayontop").classList.remove('hide');
  }else{
    console.log('kleiner')
    document.getElementById("stayontop").classList.remove('show'); 
    document.getElementById("stayontop").classList.add('hide');
  }
};

CSS 代码 #

#stayontop{
  position: fixed;
  z-index: 2;
  width: 100%;
  background-color: red;
  opacity: 50%;
}
#stayontop.hide{
  display: none;
}
#stayontop.show{
  display: block;
}
.short { background-color: yellow;}
.long { background-color: green;}

HTML 代码 #

<div class="container">
  <div id="stayontop" class="row hide" align="center"><p>Stay on top</p></div>
  <div class="row short"><p>Nice and short</p></div>
  <div class="row long">
    <p>[一段超长文本用来触发滚动条，这里就省略啦]</p>
  </div>  
</div>

如你所见，就是一个container容器里放了3个row。后两个默认显示，宽度刚好填满容器；第一个div的id是stayontop，默认带有hide类。

CSS里我设置了position: fixed和z-index，想让它固定在页面顶部，其他内容在下方滚动，这部分倒是正常工作。hide和show类用来切换显示隐藏，这也没问题。

JavaScript部分则是根据滚动的像素数来切换这两个类，功能也符合预期。

但我就是搞不明白，为啥stayontop这个div的宽度和其他div元素不一样呢？

之前有位叫Daniel的朋友给我提了建议，我也疑惑过100%宽度的问题，但问题没解决——现在这个div反而比其他元素更宽了。

备注：内容来源于stack exchange，提问作者Peter