解决HTML/CSS中边框与Div元素右侧存在间隙的问题

根据你的代码和截图情况，这几个方案可以快速消除间隙：

• 修正button标签的不规范写法
  你第一个button的闭合标签被拆分成两行且带有大量空白字符，浏览器会将这些空白解析为内联元素间的间隙，再配合overflow: hidden就会出现右侧的视觉空隙。把标签改成正常闭合：

<div class="row button--row">
  <button class="btn btn-generate grey">Generate All</button><button class="btn btn-reset grey">Reset All</button>
</div>

• 覆盖container类的默认内边距
  你的.intro同时使用了container类，多数CSS框架里这个类会自带左右padding，导致内容和边框之间出现间隙。给.intro添加样式清除内边距：

.intro.container {
  padding: 0;
}

• 强制子元素填满父容器宽度
  如果内部的.row元素没有占满父容器宽度，也会导致右侧空隙。添加样式让子元素强制撑满：

.intro .row {
  width: 100%;
  margin: 0;
}

优先尝试第一种方案，因为你的button写法明显不规范，这是最可能的原因。

内容的提问来源于stack exchange，提问作者Alii