Фиксированное меню. Съезжает текст
Пишу сайт, возникла проблема с фиксированным меню.
При добавлении в css position: fixed меню становится фиксированным, но текст съезжает.
aside {
float: left;
background: #181818;
width: 22%;
padding: 2.5%;
height: 100vh;
color: #fff;
border-right: 5px solid #4d4d4d;
position: fixed;
}
aside img {
width: 80px;
float: left;
}
aside .logo {
font-size: 20px;
margin-left: 10px;
font-weight: bold;
position: relative;
top: -3px;
}
aside h3 {
margin-top: 50px;
font-size: 28px;
}
aside ul {
list-style: none;
}
aside ul li {
color: #fff;
display: block;
margin-top: 20px;
transition: transform .6s ease;
}
aside ul li:hover,
aside ul a:hover {
color: #eb5959;
text-decoration: none;
transform: scale(1.05);
}
<aside>
<img src="{% static 'main/img/logo.jpg' %" alt="logo">
<span class="logo">Верк</span>
<h3>Навигация</h3>
<ul>
<a href="{% url 'home' %}">
<li><i class="fas fa-home"></i> Главная</li>
</a>
<a href="{% url 'about' %}">
<li><i class="fas fa-address-card"></i> О нас</li>
</a>
<a href="{% url 'news_home' %}">
<li><i class="fas fa-newspaper"></i> Новости</li>
</a>
<a href="{% url 'contact' %}">
<li><i class="fas fa-paper-plane"></i> Контакты</li>
</a>
<a href="{% url 'create' %}">
<li><button class="btn btn-info"><i class="fas fa-plus-circle"></i> Добавить запись</button></li>
</a>
</ul>
</aside>
До добавления:
После добавления:

