div背景和边框颜色未显示

Question

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

For some reason, the styles I applied to the 'main-content' div is not applied and displayed.

Why is that?

The strange thing is that it works perfectly fine on my own personal website: 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

You have an error in id name in your scss file. You need to change it to "main-content"

 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>