Right hand CSS border is overlapped by nearby element

Question

I am creating a grid of images which has a "floating" border when one item is active. This "floating" border needs to occupy the space that would otherwise be padding.

I have this set up pretty well, however I notice that the active item is missing it's right hand border. I suspect the item to the right is covering this border.

I added a different z-index to the active item but this hasn't made the border visible.

Why is this happening?

.container {
  display: inline-block;
  font-size: 0;
}

li {
  list-style-type: none;
  display: inline-block;
  border: 2px solid white;
  padding: 2px;
  margin-left: -2px;
  z-index: 9;
}

li.active {
  border-color: black;
  z-index: 10;
}

<div class=container>
  <li>
    <img src="https://via.placeholder.com/90" />
  </li>
  <li>
    <img src="https://via.placeholder.com/90" />
  </li>
  <li class=active>
    <img src="https://via.placeholder.com/90" />
  </li>
  <li>
    <img src="https://via.placeholder.com/90" />
  </li>
</div>

Answer 1

z-index has no effect on this element since it’s not a positioned element.

add position relative rule for the li tag

li{
  position: relative;
  ....
}

Answer 2

Look into flex-containers, they are built to deal with this sort of thing.