Sass code not working when nested

Hi,
I am working on a sass file called style.scss and it work fine with the following code

#nav{
	background:#ff2b2b;

	li a{
		color:#fff;
	}
	li ul{
		display:none;
	}
	li{
		float:left;
	}
	li a{
		padding:5px 7px;
		display:inline-block;
	}
}

but when i add

	li a{
		padding:5px 7px;
		display:inline-block;
	}

the background color applied to #nav, just go away like its turned off, am i missing something?

There must be other styles conflicting, or obfuscating the background. Can we get the live website where the Sass is compiled?

Add overflow: hidden; to #nav

I don’t think it’s an issue with sass at all but that you’re floating the li elements making the parent with the background collapse.

If i could have a domain, i can’t figure out a good domain name. but here is complied css on codepen

Mark is correct.

so what is science behind it? @RyanReese

Hopefully this can help explain - http://www.codefundamentals.com/blog/clearing-and-containing-floats

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.