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

Пишу сайт, возникла проблема с фиксированным меню. При добавлении в css position: fixed меню становится фиксированным, но текст съезжает.

HTML:

     <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> 

CSS:

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);
}

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

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

Вернуться на верх