Only half of react router link is clickable - css

Question

I am trying to use Routes to change pages in a React app. Here is my App.js:
import './App.css';
import Notifications from "./Components/Notifications";
import Home from "./Components/Home";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
function App() {
return (
<div className="App">
<Router>
<header className="appHeader">
<Link to="/" className="logoLink">
<img className="logo"/>
</Link>
<div className="headerLinks">
<li>
<Link className="notificationsLink" to="/notifications"> Notifications </Link>
</li>
<li>
<Link className="updatesLink" to="/updates"> Updates </Link>
</li>
<li>
<Link className="searchLink" to="/search"> Search </Link>
</li>
<Route path="/" component={Home} />
<Route exact path="/notifications" component={Notifications} />
<Route path="/updates" component={Notifications} />
<Route path="/search" component={Notifications} />
</div>
</header>
</Router>
</div>
);
}
export default App;
Here is the css for the logoLink:
.logoLink {
background-color: pink;
width: 55px;
height: 55px;
left: calc(50% - 27.5px);
position: relative;
display: inline-block;
margin-top: 2.5px;
}
The link is 55px by 55px and all of it should be clickable. But only half of it (I would assume 27.5px) is clickable. Here are images showcasing this:
Unclickable
Clickable
As you can see only the left half of the link is clickable. How can I fix this?

Answer 1

the first thing that you should know that you were wrong is this:
<img className="logo"/>
img tags wants src attribute.

Answer 2

Well I guess You forgot about Switch also I made a working codeSandbox of your code cuz I think you might have not export default your components(like Notificatios,Home,etc), here is the link and here is the App.js code:
import "./App.css";
import Notifications from "./components/Notifications";
import Home from "./components/Home";
import Updates from "./components/Updates";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
function App() {
return (
<div className="App">
<Router>
<header className="appHeader">
<Link to="/" className="logoLink">
<img className="logo" src="#" alt="HomeLogo" />
</Link>
<div className="headerLinks">
<li>
<Link className="notificationsLink" to="/notifications">
{" "}
Notifications{" "}
</Link>
</li>
<li>
<Link className="updatesLink" to="/updates">
{" "}
Updates{" "}
</Link>
</li>
<li>
<Link className="searchLink" to="/search">
{" "}
Search{" "}
</Link>
</li>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/notifications" component={Notifications} />
<Route path="/updates" component={Updates} />
<Route path="/search" component={Notifications} />
</Switch>
</div>
</header>
</Router>
</div>
);
}
export default App;

Answer 3

I fixed it by using left: 50% and transform: translateX(-50%) rather than left: calc(50% - 27.5px);. Still don't know why left: calc(50% - 27.5px); doesn't work, but this is a solid workaround