Подключен правильно, но не работает - CSS переключатель

Question

Я работаю над созданием боковой панели навигации, которая изменяет размер содержимого после извлечения.

Мой скрипт, который изменяет классы, не взаимодействует должным образом с моим css. Я подтвердил, что мой переключатель скриптов действительно меняет класс, но, несмотря на всю мою работу css, после добавления класса обновление css не происходит. Знаете почему?

{% extends 'base.html' %}

{% block title %}
<title>Visualisation</title>
{% endblock %}

{% block body %}

<div id="wrapper"></div>
<!-- Sidebar -->
<div id="sidebar-wrapper">
    <ul class="sidebar-nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Businesses</a></li>
        <li><a href="#">Export</a></li>
        <li><a href="#">Logout</a></li>
    </ul>
</div>
<!-- Page Content -->
<div id="page-content-wrapper">
    <div class="container-fluid">
        <div class="row">
            <div class='col-lg-12'>
                <a href="#" class="btn btn-success" id="menu-toggle">Toggle</a>
                <h1>Sidebar</h1>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque in laudantium quas qui omnis aliquam. Est ipsam, quos omnis provident tenetur sunt laudantium alias libero, facere distinctio consectetur, cumque error.</p>
            </div>
        </div>
    </div>
</div>

<script>
    $("#menu-toggle").click( function (e){
        e.preventDefault()
        $("#wrapper").toggleClass("menuDisplayed")
    });
</script>
{% endblock %}

Вот мой CSS:

    #wrapper.menuDisplayed #sidebar-wrapper{
    width: 10vw;
}

#wrapper.menuDisplayed #page-content-wrapper{
    padding-left: 10vw;
}