How to exclude margin from clickable area?-CodePudding

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 >
    <a href="#about_me" id="menu_bar_anchor"><h4 >aboutme</h4></a>
    <h4  id="job_experiences">job experiences</h4>
    <h4  id="my_skills">my skills</h4>
    <h4  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.

CodePudding user response：

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

<h4 ><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;
}