title: The hover effect is obscure by the right div
body: <p>I'm having a hard time styling the hover in this exercise.
  The effect isn't showing on the right side of the item card.
  My first thought was to push the item further with padding and that didn't work at all.
  So I tried adding margin and it just ruins the design I already made.</p>
  <p>I would love it if you can help fix this issue. I'm stuck.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.logo-image {
    vertical-align: middle;
    padding: 0px;
    display: table-cell;
  }
  
  .logo-image img {
    width: 100%;
  }
  
  .card {
    max-width: 300px;
    width: 220px;
    height: 300px;
    margin: auto;
    text-align: left;
    font-family: arial;
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 16px;
    padding-right: 16px;
    background-color: white;
  }
  
  .hvr-glow {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: box-shadow;
    transition-property: box-shadow;
  }
  
  .hvr-glow:hover,
  .hvr-glow:focus,
  .hvr-glow:active {
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="row"&gt;
    &lt;div class="col-sm-3"&gt;
      &lt;a target="_blank" class="hvr-glow" href="/"&gt;
        &lt;div class="logo-image"&gt;
          &lt;div class="card"&gt;
            &lt;img src="~/Content/Image/book1.jpg" style="width:100%"&gt;
            &lt;p class="idname"&gt;Mình nói gì khi nói Hạnh phúc&lt;/p&gt;
            &lt;span class="glyphicon glyphicon-star gold"&gt;&lt;/span&gt;
            &lt;span class="glyphicon glyphicon-star gold"&gt;&lt;/span&gt;
            &lt;span class="glyphicon glyphicon-star gold"&gt;&lt;/span&gt;
            &lt;span class="glyphicon glyphicon-star gold"&gt;&lt;/span&gt;
            &lt;span class="glyphicon glyphicon-star-empty gold"&gt;&lt;/span&gt;
            &lt;span class="smallfont"&gt;(4)&lt;/span&gt;
            &lt;div&gt;59.900 đ&lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/a&gt;
    &lt;/div&gt;
  
    &lt;div class="col-sm-3"&gt;
      &lt;a target="_blank" class="hvr-glow" href="/"&gt;
        &lt;div class="logo-image"&gt;
          &lt;div class="card"&gt;
            &lt;img src="~/Content/Image/book2.jpg" style="width:100%"&gt;
            &lt;p class="idname"&gt;Thay đổi cuộc sống với nhân số học&lt;/p&gt;
            &lt;span class="glyphicon glyphicon-star gold"&gt;&lt;/span&gt;
            &lt;span class="glyphicon glyphicon-star gold"&gt;&lt;/span&gt;
            &lt;span class="glyphicon glyphicon-star gold"&gt;&lt;/span&gt;
            &lt;span class="glyphicon glyphicon-star gold"&gt;&lt;/span&gt;
            &lt;span class="glyphicon glyphicon-star-empty gold"&gt;&lt;/span&gt;
            &lt;span class="smallfont"&gt;(1252)&lt;/span&gt;
            &lt;div&gt;223.000 đ&lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/a&gt;
    &lt;/div&gt;
  
    &lt;div class="col-sm-3"&gt;
      &lt;a target="_blank" class="hvr-glow" href="/"&gt;
        &lt;div class="logo-image"&gt;
          &lt;div class="card "&gt;
            &lt;img src="~/Content/Image/book3.jpg" style="width:100%"&gt;
            &lt;p class="idname"&gt;Sức mạnh của ngôn từ&lt;/p&gt;
            &lt;span class="glyphicon glyphicon-star gold"&gt;&lt;/span&gt;
            &lt;span class="glyphicon glyphicon-star gold"&gt;&lt;/span&gt;
            &lt;span class="glyphicon glyphicon-star gold"&gt;&lt;/span&gt;
            &lt;span class="glyphicon glyphicon-star gold"&gt;&lt;/span&gt;
            &lt;span class="glyphicon glyphicon-star-empty gold"&gt;&lt;/span&gt;
            &lt;span class="smallfont"&gt;(445)&lt;/span&gt;
            &lt;p&gt;79.900 đ&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/a&gt;
    &lt;/div&gt;
  
    &lt;div class="col-sm-3"&gt;
      &lt;a target="_blank" class="hvr-glow" href="/"&gt;
        &lt;div class="logo-image"&gt;
          &lt;div class="card "&gt;
            &lt;img src="~/Content/Image/book4.jpg" style="width:100%"&gt;
            &lt;p class="idname"&gt;Tô Bình Yên Vẽ Hạnh Phúc&lt;/p&gt;
            &lt;span class="glyphicon glyphicon-star gold"&gt;&lt;/span&gt;
            &lt;span class="glyphicon glyphicon-star gold"&gt;&lt;/span&gt;
            &lt;span class="glyphicon glyphicon-star gold"&gt;&lt;/span&gt;
            &lt;span class="glyphicon glyphicon-star gold"&gt;&lt;/span&gt;
            &lt;span class="glyphicon glyphicon-star-empty gold"&gt;&lt;/span&gt;
            &lt;span class="smallfont"&gt;(1234)&lt;/span&gt;
            &lt;p&gt;53.700 đ&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/a&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><a href="https://i.stack.imgur.com/yvsbW.png" rel="nofollow noreferrer">Image of the problem</a></p>