Несовпадение и неточное наведение боковой панели ⇐ CSS

[Anonymous]

Я делаю боковую панель для проекта, над которым работаю. Однако все мои параметры выровнены правильно, и их можно щелкнуть только при точном наведении курсора на их имя.
Но мой последний вариант, выход из системы, не выравнивается точно так же, как другой. Его можно щелкнуть в любом месте столбца.
Мой файл jsk:

Код: Выделить всё

import { FaHome, FaRegNewspaper, FaUserAlt, FaSignOutAlt, FaComments } from 'react-icons/fa';
import { useNavigate } from 'react-router-dom';
import "./Sidebar.css";
import logo from '/logo.svg';

const Sidebar = () => {
const navigate = useNavigate();

const handleLogout = () => {
sessionStorage.removeItem("token");
navigate("/");
};

return (



[img]{logo} alt=[/img]



Home


Mon Fil


Salon Chat


Mon Profil





Logout


);
};

export default Sidebar;

мой CSS-файл:

Код: Выделить всё

.sidebar {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 30.5%;
background-color: white;
display: flex;
flex-direction: column;
justify-content: space-between;
border-right: 1px solid #000;
padding: 20px 0;
}

.sidebar__logo {
display: flex;
justify-content: center;
align-items: center;
padding: 10px 25px;
}

.sidebar__logo img {
height: 40px;
width: auto;
}

.sidebar__top {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 30px;
}

.sidebar__options {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 40px;
}

.sidebar__option, .sidebar__logout {
color: #1DA1F2;
font-size: 22px;
cursor: pointer;
padding: 10px 20px;
display: flex;
align-items: center;
gap: 10px;
text-align: left;
width: 100%;
}

.sidebar__option:hover, .sidebar__logout:hover {
background-color: #b6b6b654;
border-radius: 50px;
}

.sidebar__option.active {
background-color: #e6f5fc;
font-weight: bold;
border-right: 5px solid #1DA1F2;
}

.sidebar__logout {
color: #f44336;
font-size: 22px;
cursor: pointer;
padding: 10px 20px;
display: flex;
align-items: center;
justify-content: flex-end;
}

.sidebar__logout:hover {
background-color: #ffe6e6;
border-radius: 50px;
}

Несовпадение и наведение курсора на другие параметры

Подробнее здесь: https://stackoverflow.com/questions/792 ... or-sidebar