Компонент Link в React Router нарушает мой стиль на панели навигации ⇐ CSS

[Anonymous]

Моя проблема в том, что когда я не использую компонент Link, стиль представления великолепен. Но всякий раз, когда я добавляю компонент Link, он отменяет некоторые визуальные характеристики. Я хочу, чтобы первая коробка была второй. Но это портит представление везде, где я использую компонент Link.
Неверное представление:
введите здесь описание изображения
Правильное представление:введите здесь описание изображения
Это та часть моего кода, с которой у меня возникают трудности.

• Explore
  
  Projects
• Hobbies
• Contact

Это файл .css, который я использую
/* menu-bar */
ul[role] {
margin: 0;
padding: 0;
list-style: none;
cursor: pointer;
font-family: Chicago_12;
font-size: 1em;
}
ul[role="menu-bar"] {
display: flex;
background: var(--primary);
}
ul[role="menu-bar"] > [role="menu-item"] {
position: relative;
padding: 6px 10px;
}
ul[role="menu-bar"] > [role="menu-item"]:focus, ul[role="menu-bar"] > [role="menu-item"]:focus-within, ul[role="menu-bar"] > [role="menu-item"]:hover {
background: var(--secondary);
color: var(--primary);
outline: none;
}
ul[role="menu-bar"] > [role="menu-item"][aria-haspopup="false"] * {
color: inherit;
background: inherit;
text-decoration: none;
}
ul[role="menu"] {
position: relative;
min-width: 200px;
background: var(--primary);
color: initial;
border: 1px solid;
box-shadow: var(--box-shadow);
}
ul[role="menu"]::before {
content: "";
pointer-events: none;
position: absolute;
left: 28px;
width: 2px;
box-shadow: inset 1px 0 rgba(0, 0, 0, 0.15), inset -1px 0 var(--primary);
}
[role="menu-item"] ul[role="menu"] {
display: none;
position: absolute;
left: 0;
top: 100%;
z-index: 99;
}
ul[role="menu"] > [role="menu-item"] > a, ul[role="menu"] > [role="menu-item"] > button, ul[role="menu"] > [role="menu-item"][aria-haspopup="true"] {
all: unset;
position: relative;
padding: 5px 20px;
display: block;
width: 100%;
box-sizing: border-box;

}
ul[role="menu"] > [role="menu-item"] > a:hover, ul[role="menu"] > [role="menu-item"] > button:hover, ul[role="menu"] > [role="menu-item"][aria-haspopup="true"]:hover, ul[role="menu"] > [role="menu-item"] > a:focus, ul[role="menu"] > [role="menu-item"] > button:focus, ul[role="menu"] > [role="menu-item"][aria-haspopup="true"]:focus {
background: var(--secondary);
color: var(--primary);
}
ul [role="menu-item"] {
position: relative;
}
ul [role="menu-item"]:focus > [role="menu"], ul [role="menu-item"]:focus-within > [role="menu"] {
display: block;
}
ul [role="menu-item"].divider::after {
content: "";
pointer-events: none;
display: block;
padding: 0;
border-top: 1.5px dotted var(--secondary);
}

/* styles specific to demo page */
.menu-items > li {
margin-bottom: 1rem;
}


Подробнее здесь: https://stackoverflow.com/questions/785 ... gation-var