.parent :hover is only applied to .children not .parent

Question

I am having trouble with :hover. When I have the following code:

<div className="view-container"
    <h2>abc</h2>
</div>

.view-container {
    cursor: pointer;
    box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.15);
    background-color: rgb(162, 192, 255);
}

.view-container :hover {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

h2 {
width: 100px;
}

The hover effect is only applied to the h2 part and not the div I want it applied to. I tried adding an extra div around the div and h2:

<div>
    <div>
         <h2>

then the hover is applied to the second div and h2, which is weird but in that case I can't get it to not work on h2.