css ruling doesn't overriden when using id selector -

i have sidebar on page i'm trying apply custom css to, reason ruling won't override old ones though it's cascaded correctly. idea why happening?

i using normalize.css, don't think that's problem.

i want change margins on #author-name , #author-bio.

thanks help.

/************************************************  searchbox  ************************************************/  #articles-sidebar {  	margin: 0.5em 0;  	padding: 1em;  }  #articles-sidebar h2, #articles-sidebar p {  	margin: 0;  	padding: 0;  }  #articles-sidebar input {  	box-sizing: border-box;  	padding: 0.5em;  	margin: 0.5em 0;  }  #articles-sidebar input[type="submit"] {  	border: none;  	color: #fff;  	background-color: #26a65b;  }        /************************************************  articles  ************************************************/  .article-box {  	padding: 0.5em;  	margin-bottom: 0.5em;  }  .free {  	background-color: #e3f9ec;  }  .members {  	background-color: #f5e8f4;  }  .article-categories {  	list-style: none;  	margin: 0.5em 0 0 0;  	padding: 0;  }  .article-category {  	margin-right: 0.5em;  	padding: 0.2em;  	display:inline-block;  	/* todo figure out category background color */  	background-color: #fff;  	font-weight: bold;  }  .article-box h1 {  	margin: 0.5em 0;  	padding: 0;  }  .article-box h3 {  	margin: 0;  	padding: 0;  }  .article-box p {  	margin: 0.5em 0;  	padding: 0;  }  .article-box a:link, .article-box a:visited {  	text-decoration: none;  	color: #26a65b;  }  .article-box a:hover {  	color: #913d88;  }        /************************************************  single article page  ************************************************/  #articles-feed button {  	background-color: #913d88;      border: none;      color: #fff;      padding: 1em;      display: inline-block;      margin: 1em 0;	  }        /************************************************  single article autor  ************************************************/  #author-img {  	height: 100px;  	border-radius: 150px;  	border: 1px solid black;  	display: block;  	margin: 1em 0;  }  #author-name {  	margin: 1em 0;  }    /************************************************  tablet  ************************************************/  @media screen , (min-width: 768px) {    }        /************************************************  laptop  ************************************************/  @media screen , (min-width: 992px) {  	/* layout */  	#articles-sidebar, #articles-feed {  		display: inline-block;  	}  	#articles-sidebar {  		width: 25%;  		float: right;  	}  	#articles-feed {  		width: 70%;  		float: left;  	}  }        /************************************************  widescreen  ************************************************/  @media screen , (min-width: 1200px) {    }

	<div id="articles-sidebar">  		<h2>search articles archive:</h2>  		<form id="searchbox" method="post">  			<input name="searchword" type="text" placeholder="author, title, keyword...">  			<input type="submit" value="search">  		</form>  		<div id="author">  			<img id="author-img" src="img/authors/yannick.jpeg">  			<h2 id="author-name">yannick Šušteršič</h2>  			<p id="author-bio">blablablablablabla bla bla bal.</p>  		</div>  	</div>  	<div id="articles-feed">  	</div>  	<script src="http://code.jquery.com/jquery-1.8.3.js"></script>  	<script src="js/articles.js"></script>

the reason margin not being applied expected because css:

#articles-sidebar h2, #articles-sidebar p {     margin: 0;     padding: 0; } 

takes precedence on css:

#author-name {     margin: 1em 0; } 

as has higher specificity. check out article outlining precedence in css.

in order change margin of #author-name may need use more specific method such

#articles-sidebar #author-name {     margin: 1em 0; }