Hallo Ihr Lieben,

erst einmal vorweg, ich bin blutiger Anfänger (also bitte Nachsicht mit mir  )  und arbeite gerade an einer Navigationsleiste die ca mittig im Viewport platziert und von rechts nach links mittels Flexbox läuft. <li> habe ich als inline-block und <a> als inline-Element dargestellt, in der Hoffnung ich kann dadurch die Breite und Höhe dieser Elemente an <ul> anpassen.
Die Weite und Breite von <ul> und <li> passen sich automatisch wunderbar an die des Elternelements <nav> an.

Problem: die Klickfläche von <a> ist größer als <ul> und <li> und passt sich überhaupt nicht an, wenn ich beispielsweise "inherit" verwende.
ERGO: Hiiiiiiiiiiilfe   

Hier ist mein Code:

header nav {
    width: 100%;
    height: 10rem;

    top: calc(30rem - 33%);

    background-color:rgba(255, 255, 255, 0.3);
}

header nav ul {
    max-width: 1025px;
    height: 100%; /*Anpassung an Höhe des Elternelements; ok*/
    margin: auto;

    display: -webkit-box;
    display: -webkit-flex;
    display: flex;

    justify-content: center;

}

header nav ul li { 
    max-width: inherit; /*Anpassung an Breite des Elternelements; ok*/
    height: inherit;
    margin: auto;
    display: inline; /*Positionierung nebeneinander*/
}

header nav ul li a {
    display: inline-block;

    height: 100%;

    font-size: 1.4rem;
    font-weight: bold;
    white-space: nowrap;
    text-decoration: none;
} 

Reicht das als Info? 

Ist irgendein Super-Brain da draußen, das mir vielleicht helfen kann?

LG Pippa