Border appears on hover - html

Question

I have a list group in a card. When you hover over the topmost list group item, a border appears under it (no border when not hovering). When I set :hover override in Google Chrome's Dev Tools, the border doesn't appear. Why does this happen?
https://jsfiddle.net/williamqin123/0fkwsemn/
<div class="container">
<div class="shadow-sm card my-5">
<div class="list-group list-group-flush">
<div class="text-center list-group-item">
<h1 class="text-left d-inline-block mb-0">
Submit
<small class="text-muted">Create your ad in less than 1 minute</small>
</h1>
</div>
<form action="/submit" method="POST" class="mb-0">
<div class="form-group list-group-item">
<label for="site">Site</label>
<div class="input-group" id="site-menu">
<select class="form-control text-center" name="site" id="site" required>
</select>
<div class="btn-group-toggle input-group-append" data-toggle="buttons">
<label class="btn btn-outline-primary">
<input type="checkbox" name="meta" value='checked'> Meta
</label>
</div>
</div>
</div>
<div class="form-group list-group-item">
<label for="post-id">Post ID</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">#</span>
</div>
<input class="form-control text-center" type="number" min="1" step="1" name="id" id="post-id" required>
</div>
</div>
<div class="form-group text-center list-group-item">
<input class="btn btn-primary btn-lg" type="submit" value="Proceed">
</div>
</form>
</div>
</div>
</div>

Answer 1

There is a border on the element:
.list-group-item {
position: relative;
margin-bottom: -1px;
border: 1px solid rgba(0,0,0,.125);
}
You can't see it initially because the negative margin makes the next element shift upwards (by 1px) and overlap it.
This code...
.list-group-item:hover {
z-index: 1;
}
...adds a new stacking context, making it appear in front, and allows you to see the border.