title: Only top half of div nested in anchor is clickable
body: <p>The basic idea here is I have a font-awesome down arrow inside of a circle div. I want to be able to click the circle and have the page auto-scroll down to just above the circle. Everything about it works except for the fact that only the top half of the circle is clickable. Bootstrap is being used for rows and columns. Browser is Chrome. I'm open to another solution (as long as it's just HTML and CSS) but would also like to know why specifically this bug is occurring.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-sm-12"&gt;
          &lt;a name="howitworks" class="HowItWorks__anchor"&gt;&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="row"&gt;
      &lt;div class="col-sm-12"&gt;
          &lt;a href="#howitworks"&gt;
          &lt;div class="HowItWorks__downArrow"&gt;
              &lt;i class="fa fa-3x fa-angle-down" aria-hidden="true"&gt;&lt;/i&gt;
          &lt;/div&gt;
          &lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.HowItWorks__anchor {
      position: absolute;
      top: -50px;
  }
  
  .HowItWorks__downArrow {
      color: $white;
      background-color: $brand-blue-dark;
      height: 50px;
      width: 50px;
      border-radius: 100%;
      text-align: center;
      padding-top: 5px;
      position: absolute;
      bottom: -22px;
      left: calc(50% - 25px);
  }
  </code></pre>
  
  <p>Screenshot</p>
  
  <p><a href="https://i.stack.imgur.com/RIrxZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RIrxZ.png" alt="Top of splash page, circle div on bottom"></a></p>