Mr Crabbz

.non-container {
  width: 100vw; /* 100% ширины вьюпорта */
  position: relative;  /*включаем left */
  left: 50%; /* устанавливаем левый край non-container в центр container'a */
  transform: translateX(-50%); /* двигаем non-container влево на 50% его ширины */
}

<progress data-color="#ff0000"></progress>

progress::-webkit-progress-value {
    background: attr(data-color);
    transition-duration: 2s;
}

let el = document.querySelector('progress');
el.dataset.color = '#00ff00';

let count = $(".my-block").length;
console.log(count);

https://wp-kama.ru/id_2018/ajax-v-wordpress.html

fancyBox is licensed under the GPLv3 license for all open source applications.
A commercial license is required for all commercial applications (including sites, themes and apps you plan to sell).

Если ваш проект - не опенсорс (читай, открытый проект для гитхаба), то покупать нужно. Вы же сайт на продажу делаете, вот вам и "...required for all commercial applications (including sites..."

https://isotope.metafizzy.co/

Потому что вы .container задали:

.container {
display: flex;
}

Если поменять на display:block - всё работает. Очевидно, что конфликт с флексом.

Примерно:

$(window).on("scroll", function(){

	var headerPosition = $("header").offset().top + $("header").outerHeight();
	var sidebarPosition = $("aside").offset().top;
	if( sidebarPosition <= headerPosition ){
		console.log("Сайдбар добрался до шапки");
	}

});

Разберитесь для чего нужны class, а для чего id.

https://jsfiddle.net/dgs2amme/