How to exclude margin from clickable area?

I am trying to exclude margin’s clickable area from my top navbar and nothing seems to work. I’ve tried putting there z-index, changing display to block and inline-block, but nothing helped.

HTML:

<div class="menuBar">
    <a href="#about_me" id="menu_bar_anchor"><h4 class="menuContent">aboutme</h4></a>
    <h4 class="menuContent" id="job_experiences">job experiences</h4>
    <h4 class="menuContent" id="my_skills">my skills</h4>
    <h4 class="menuContent" id="contact">contact</h4>
</div>

CSS:

/* MENU BAR SETTING */
.menuBar{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: flex-start;
    align-content: center;

    background-color: #12263A;
}

.menuContent{
    margin: 56px 0;

    color: #C5D8D1;
    font-weight: 500;
    font-size: 2.125em;
    text-transform: uppercase;

    margin-right: 2.125em;
}

#menu_bar_anchor{
    text-decoration: none;
}

Thanks for any advice.

>Solution :

Id suggest putting your a and h4 the other way around:

<h4 class="menuContent"><a href="#about_me" id="menu_bar_anchor">aboutme</a></h4>

Since the clickable area is a property of <a>.

EDIT:
You also have to put the color property on a now:

#menu_bar_anchor{
  text-decoration: none;
  color: #C5D8D1;
}