I’m trying to center these icons in the dock-style bar. However, even with no padding on the dock element, there is a random gap for no apparent reason.
Mysterious gap?

<div id="dock">
  <div><svg -- />
</svg></div>
  <div><svg -- />
</svg></div>
  <div><svg -- />
</svg></div>
  <div><svg -- />
</svg></div>
  <div><svg -- />
</svg></div>
</div>

#dock {
  position: absolute;
  border: .5px solid #d9d9d9;
  background-color: rgba(240, 240, 240, 0.75);
  backdrop-filter: blur(5px);
  display: flex;
  left: 50%;
  bottom: 0%;
  transform: translate(-50%, -30%);
  border-radius: 2vw;
  padding: .6vw 0 .6vw 0;
}

#dock > div > svg {
  height: 6vw;
  width: 6vw;
  margin: 0 1vw 0 1vw;  
  padding: .4vw;
  background-color: white;
}

I’ve tried justify-content: center; and align-items: center; but these have made no difference.