Where is the mistake? jQuery

В HTML имеется кнопка с id="addGreen", а также блок с id="testBox", которому в CSS задана ширина 400пх, высота 100пх и фон серого цвета
Задача: Написать функцию, чтобы по нажатию на кнопку с id="addGreen" блоку с id="testBox" присвоить также класс "greenBg", которому прописан зелёный фон

То-есть, по нажатию на кнопку, этому серому блоку должен добавится класс "greenBg" и этот блок должен стать зелёного цвета.
Всё пишу вроде правильно, проверял через alert(), работает. Но когда пишу функцию с addClass, блоку "testBox" также присваивается класс "greenBg", но цвет фона не меняется

Сам код:

$(document).ready(function() {

$('#addGreen').on('click', function() {
$('#testBox').addClass('greenBg');
});

});

Code

$(document).ready(function() {



    $('#addGreen').on('click', function() {

        $('#testBox').addClass('greenBg');

    });



});

Проверял через инструменты разработчику, этому серому блоку и правда присваивается ещё и класс greenBg, но цвет фона не меняется. А в обучающем видео, у автора меняется цвет фона, и код у него абсолютно идентичный.
Пытался загуглить, так и не нашёл решения. В чём ошибка?

Код на видео автора

https://prnt.sc/qwe2kk

Мой CSS код

https://prnt.sc/qwe2qs

Мой HTML код

https://prnt.sc/qwe2wb

upd: а вот кста что получается, по нажатию на кнопку - фон не меняется
https://prnt.sc/qwe495