CSS保证金权利似乎不起作用

Question

https://jsfiddle.net/m4ewm67w/3/

我已经制作了这个小演示，以至于容器中的物品的正确余量似乎不起作用。顶部，底部和左边缘正在工作。我想知道我是否理解了一些完全错误的概念。

我的HTML和CSS代码在这里：

<style>
div.container {
  border: 1px solid gray;
  box-sizing: border-box;
  position: relative;
  width: 100px;
  /* padding: 4px; */
}
div.item {
  height: 40px;
  width: 100%;
  border: 1px solid gray;
  box-sizing: border-box;
  margin: 5px 100px 5px 5px; 
  display: grid;
  align-content: center;
  justify-content: center;
  background-color: white;
}
</style>
<div class="container">
  <div class="item">0</div>
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
</div>

Answer 1

div.item {
  height: 40px;
  width: 90px;
  border: 1px solid gray;
  box-sizing: border-box;
  margin: 5px 100px 5px 5px; 
  display: grid;
  align-content: center;
  justify-content: center;
  background-color: white;
}

尝试;(问题是宽度