Only top half of div nested in anchor is clickable

Question

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.

HTML

<div class="row">
    <div class="col-sm-12">
        <a name="howitworks" class="HowItWorks__anchor"></a>
    </div>
</div>

<div class="row">
    <div class="col-sm-12">
        <a href="#howitworks">
        <div class="HowItWorks__downArrow">
            <i class="fa fa-3x fa-angle-down" aria-hidden="true"></i>
        </div>
        </a>
    </div>
</div>

CSS

.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);
}

Screenshot

Answer 1

Better do not overengineer here... Remove those extra divs inside your anchor tags an simply use negative margin:

<a id="your-link">
    <span class="fa fa-angle-down"></span>
</a>

a#your-link {
    border-radius: 30px;
    display: block;
    width: 30px;
    height: 30px;
    margin: -15px auto 0;
    text-align: center;
}

or add relative positioning:

a#your-link {
    border-radius: 30px;
    display: block;
    width: 30px;
    height: 30px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    top: 15px;
}

There are few ways to achieve this, they are all valid, just treat your anchor tag as a clean block element and then position it properly.

UPD OK, try to keep your section markup as this:

<section>
    // some section content
    <a class="section-link">
        <span class="fa fa-angle-down"></span>
    </a>
</section>

section {
    position: relative;
}

.section-link {
    border-radius: 30px;
    display: block;
    width: 30px;
    height: 30px;
    text-align: center;
    position: absolute;
    left: 50%;
    bottom: -15px;
    margin-left: -15px;
}

Answer 2

TL;DR: All of the parents need to have a height set equal to the circle div.

Finally got it working. My solution was setting the height of the row div containing the columns div containing the anchor tag circle div to 30px, like so:

HTML

<div class="row">
    <div class="col-sm-12">
        <a name="howitworks" class="HowItWorks__target"></a>
    </div>
</div>

<div class="row HowItWorks__anchorWrapper">
    <div class="col-sm-12">
        <a href="#howitworks">
            <div class="HowItWorks__downArrow">
                <i class="fa fa-3x fa-angle-down" aria-hidden="true"></i>&nbsp;
            </div>
        </a>
    </div>
</div>

CSS

.HowItWorks__target {
    position: absolute;
    top: -50px;
}
.HowItWorks__anchorWrapper {
    height: 30px;
}
.HowItWorks__anchor {
    border-radius: 30px;
    width: 30px;
    height: 30px;
    margin: 0 auto;
    text-align: center;
}
.HowItWorks__downArrow {
    color: $white;
    background-color: $brand-blue-dark;
    height: 50px;
    width: 50px;
    border-radius: 100%;
    text-align: center;
    padding-top: 5px;
    padding-left: 3px;
    position: absolute;
    bottom: -20px;
    left: calc(50% - 25px);
}