1

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

I have crafted this little demo above that the right margin for the items in the container doesn't seem to work. The top, bottom and left margin are working. I'm wondering if I have understood some concept totally wrong.

My html and css code here:

<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>

1 Answers1

-3
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;
}

Try that ;) the problem was the width

superradio
  • 89
  • 1
  • 2
  • 9
  • the problem was not simply the width, i guess it need more deep explanation ... – Temani Afif Feb 18 '18 at 23:37
  • if you don't want to hardcode the width here's the solution: `div.item { height: 40px; width: 90%; border: 1px solid gray; box-sizing: border-box; margin: 5px 100px 5px 5px; display: grid; align-content: center; justify-content: center; background-color: white; }` I hope it helped you. – superradio Feb 18 '18 at 23:37