Html Div/按钮看起来比应该的宽1像素

正如您在下图中看到的，下拉div比它应该的宽一个像素。最奇怪的是，在悬停时，它只会改变颜色（SCSS FIDLE的第22行）并且不再变宽 显然，它的宽度等于其父对象，但正如您所看到的，它不是。 也许它和按钮悬停有什么关系

有人能给我解释一下这种情况吗

代码是这样的。

---

这是一种视错觉。这是在欺骗你的大脑，因为你显示器上像素的分割边缘是黑色的，你的大脑将它们与黑色背景形成对比。尝试将整个背景色更改为较浅的色调，效果会减弱：

.home{
高度：200px；
填充：20px；
背景色：rgba（250、250、250、0.7）；这是一种视错觉。它会欺骗你的大脑，因为显示器上像素的分割边缘是黑色的，你的大脑会将它们与黑色背景形成对比。尝试将整个背景色更改为较浅的阴影，效果会减弱：


.home{
高度：200px；
填充：20px；
背景色：rgba（250250250，0.7）；我觉得这像是一种光学效果。开发者工具确认它实际上更宽了吗？我觉得它的尺寸一样（Firefox）几分钟前我在Firefox上试用过，它实际上看起来更宽。但所有开发工具都说它的宽度相同。请检查新添加的图像。将列表按钮的初始背景颜色更改为#ff530d可修复“问题”.但为什么它会出现在第一位？对我来说，这看起来像是一种光学效果。开发者工具确认它实际上更宽了吗？它对我来说大小相同（Firefox）几分钟前我在Firefox上尝试过，它实际上看起来更宽。但所有开发工具都说它的宽度相同。请检查新添加的图像。将列表按钮的初始背景颜色更改为#ff530d可以解决“问题”。但为什么它会出现在第一位？这很有趣。谢谢！这很有趣。谢谢！
<div class="home">
    <div class="submit">
      <button class="btn-search">
        Search Items
      </button>
      <div class="menu">
        <ul role="menu">
          <li>
            <button>
              Items1
            </button>
          </li>
          <li>
            <button>
              Items2
            </button>
          </li>
        </ul>     
      </div>  <!-- /.menu -->   
    </div> <!-- /.submit -->
</div> <!-- /.home -->

.home {
  height: 200px;
  padding: 20px;
  background-color: rgba(0, 0, 0, 0.7);
  button {
    height: 40px;
    line-height: 40px;
    width: 100%;
  }
  .submit { 
    width: 20%; 
    position: relative;
    .btn-search { 
      background: #ff530d;
      color: #fff;
      outline: none;
      border: none;
      &:hover,
      &:focus,
      &:active {
        background-color: #f26202;
        outline: none;
      }
    } //.btn-search
    .menu {
      position: absolute;
      width: 100%;
      border-radius: 0;
      ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
        background-color: transparent;
        button {
          background: #fff;
          border: none;
          outline: none;
          &:hover,
          &:focus,
          &:active {
            background: #ff530d;
            border: none;
            outline: none;
          }
        }
      } 
    } //.menu
  } //.submit
}

.home {
  height: 200px;
  padding: 20px;
  background-color: rgba(250, 250, 250, 0.7); <--
  button {
    height: 40px;
    line-height: 40px;
    width: 100%;
  }