I want to contain the teal hover within the borders of my social media links. I’ve tried adjusting the padding and heights and widths via CSS properties but when hovering, it still overlaps over the right border.

This is what it looks like while not hovering:

[![Three black boxes with icons](https://i.imgur.com/YbWSMWO.png)](https://i.imgur.com/YbWSMWO.png)

This is what it looks like when hovering:

[![The first box has a teal background, but the background extends to the second box](https://i.imgur.com/lZE5ZiV.png)](https://i.imgur.com/lZE5ZiV.png)

The image sizes are each 19px × 15px.

```css
#box {
  width: 200px;
  height: 50px;
  background-clip: padding-box;
  position: relative;
  margin: 0;
  left: 1.4em;
  background: rgba(0, 0, 0, 1);
  float: right;
  z-index: 200;
}

#boxlist li {
  height: 50px;
  width: 20px;
  position: relative;
  list-style-type: none;
  display: inline-block;
  bottom: 1em;
  margin-left: -2.5em;
  float: left;
}

.imgli:hover {
  background: rgba(0, 255, 255, 1);
}

.imgli {
  border-left: 1px solid rgba(153, 153, 153, 1);
  padding-right: 4em;
}

.imgli:first-child {
  left: -0.1em;
  border: none;
}

.imgli:nth-child(2) {
  left: 1em;
}

.imgli:nth-child(3) {
  left: 2em;
}
```

```html
<header>
  <div id="box">
    <ul id="boxlist">
      <li class="imgli"><img src="images/banner-social-icon-twitter.png" class="boximg"></li>
      <li class="imgli"><img src="images/banner-social-icon-facebook.png" class="boximg"></li>
      <li class="imgli"><img src="images/banner-social-icon-email.png" class="boximg"></li>
    </ul>
  </div>
</header>
```