I've encountered an issue with a list group in a card. Specifically, when hovering over the topmost item in the list group, a border appears underneath it (which should only appear when hovering). However, when I try to override this behavior using :hover in Google Chrome's Dev Tools, the border fails to appear. Can anyone explain why this is happening?
<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>