цвет фона div и границы не отображается

Question

https://jsfiddle.net/sebastian3495/y3nume0p/28/

По какой-то причине стили, которые я применил к div 'main-content', не применяются и не отображаются.

Почему это так?

Странно то, что он прекрасно работает на моем личном сайте: https://gyazo.com/e48cab8526ca2f933587ea52acc0b3f4

div#main-container {
    background: green;
    overflow: hidden;
    border: 21px solid blue;
}

<div id='main-content'>
  <p>0</p>
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
</div>

Answer 1

У вас есть ошибка в имени пользователя в вашем файле scss.Вам нужно изменить его на «основной контент»

jQuery.fn.clickToggle = function(a,b) {
  var ab = [b,a];
  return this.on("click", function(){ ab[this._tog^=1].call(this); });
};


window.onload = function () {

	$("button").clickToggle(
			() => {$("p:nth-child(1)").css("margin-left", "0")},
			() => {$("p:nth-child(1)").css("margin-left", "100px")}
	)

};

div#main-content {
    background: green;
    overflow: hidden;
    border: 21px solid blue;
}

div > p {
    float: clear;
    margin-bottom: 0;
    display: inline-block;
    width: 20%;
    border: 2px solid black;
    -webkit-transition: 2s;
    height: 100%;
}


div > p:nth-child(n+2) {
    background-color: yellow;
}

div > p:nth-child(2) {
    background-color: purple;
}

div > p:nth-child(1) {
    margin-left: 200px;
    background: red;
}

<div id='main-content'>
  <p>0</p>
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
</div>

<button>Click me</button>