background-color of div doesn't filling to 100% of it's width. 1px of div is kinda not filling

Question

Very silly question, but i can't understand... In a row of small div elements some of my divs have different margin-right, even if i define same margin-right for all row items. I wonder what exactly fires this kind of action.

P.S. Thanks for reading, sorry for my bad english

.row{
  display: flex;
}
.row__item{
  width: 50px;
  height: 20px;
  margin-right: 1px;
  background: red;
}

<div class="row">
  <div class="row__item"></div>
  <div class="row__item"></div>
  <div class="row__item"></div>
  <div class="row__item"></div>
  <div class="row__item"></div>
  <div class="row__item"></div>
</div>

Answer 1

margin is outside of element that's so normal for it to Not take background

Remove margin-right to get rid of that space

If you want your content to be spaced from each other and yet take the background, use padding instead

Padding box is a part of your element (breathing space between content-box and border-box)

And if you want the padding Not to add up with your element's (50px) width, the answer is box-sizing: border-box;

So if this wasn't what you mean and what you need, let me know

.row{
  display: flex;
}
.row__item{
  width: 50px;
  height: 20px;
  background: red;
}

<div class="row">
  <div class="row__item"></div>
  <div class="row__item"></div>
  <div class="row__item"></div>
  <div class="row__item"></div>
  <div class="row__item"></div>
  <div class="row__item"></div>
</div>