块背景延伸到该区域之外

Question

我有这个HTML makrup：

<div class="wrapper">
  <figure>
     // some content 
  </figure>
  <figure>
     // some content 
  </figure>
</div>

和风格：

.wrapper {
  width: 100%;
  overflow: hidden;
  position: relative;
  background-color: white;
}

figure {
  width: 49%;
  display: inline-block;
}

figure:nth-of-type(1) {
  margin-right: 1%;
}

现在我有这种情况：

在第二个块/图背景中延伸超出自我区域。但如果我为width设置figure，一切都会好的。我尝试使用background-cilp，background-origin，没有任何帮助。任何人都可以告诉我为什么会这样吗？