Фиксированное меню. Съезжает текст

Пишу сайт, возникла проблема с фиксированным меню. При добавлении в 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>

До добавления:

До

После добавления:

После


Ответы (0 шт):