Why is my outline top not showing in CSS? - html

Question

Im styling multiple boxes, it's only the first box whose top outline is not working. Here's my code. I'm using bootstrap in React. Border works. I have attached the relevent css.
EDIT: I hacked it by setting my outline-offset to negative the amount of pixels. so -3. Worked fine for me, and am wondering how it happened and how to avoid it.
.savedMeme--card {
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: 100%;
padding: 10px;
}
.savedMeme--card:hover {
background-color: #e3e3e3c4;
outline: 3px solid var(--blue);
}
<div className="offcanvas offcanvas-end" tabIndex="-1" id="sidebar" aria-labelledby="sidebar--header">
<div className="offcanvas-header">
<h2 className="offcanvas-title" id="sidebar--header">Your saved memes</h2>
<button className="btn-close" data-bs-dismiss="offcanvas" type="button" aria-label="Close"></button>
</div>
<div className="offcanvas-body p-0">
<div className="savedMeme--card">
<!-- this is an imported component -->
<div className="savedMeme--header">
<span className="bi bi-bookmark-x-fill"></span>
<img src={props.url} style={{ width: "80px", height: "80px" }} alt="meme" />
</div>
<div className="savedMeme-body">
<p>
{props.topText}...
</p>
<p className="savedMeme--view-meme">view meme</p>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 1

I have fixed your closing div tag issue and changed className to class and just defined css variable
:root {
--blue: blue;
}
Everything seems to works fine on hover.
:root {
--blue: blue;
}
.savedMeme--card {
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: 100%;
padding: 10px;
}
.savedMeme--card:hover {
background-color: #e3e3e3c4;
outline: 3px solid var(--blue);
}
<div class="offcanvas offcanvas-end" tabIndex="-1" id="sidebar" aria-labelledby="sidebar--header">
<div class="offcanvas-header">
<h2 class="offcanvas-title" id="sidebar--header">Your saved memes</h2>
<button class="btn-close" data-bs-dismiss="offcanvas" type="button" aria-label="Close"></button>
</div>
<div class="offcanvas-body p-0">
<div class="savedMeme--card">
<!-- this is an imported component -->
<div class="savedMeme--header">
<span class="bi bi-bookmark-x-fill"></span>
<img src={props.url} style={{ width: "80px" , height: "80px" }} alt="meme" />
</div>
<div class="savedMeme-body">
<p>
{props.topText}...
</p>
<p class="savedMeme--view-meme">view meme</p>
</div>
</div>
</div>
</div>