div problem text

HTML

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    <div class="parent">

    
    <a>    
    <div>
        <h2>Text</h2>
    </div>
</a>    
    <div>
        <h2>Text</h2>
    </div>


</div>
</body>
</html>

CSS

.parent{

    display: flex;
    flex-wrap: wrap;
    border: #000000 2px solid;
    justify-content: center;

}

.parent div {

    width: 300px;
    height: 50px;
    background-color: rgba(197, 197, 197, 0.788);
    border: #000000 solid 2px;
    border-radius: 10px;
    margin: 10px;
    transition-duration: 3s;
    text-align: center;
    align-items: center;
}



.parent div:hover {
   background-color: white;
}