Hey, I have some paragraphs in my main content and footer but I want them do have different values, this is what I have: #content p { margin-bottom: 15px; font-size: 13px; color: #f5f5f5; } #footer p { margin-bottom: 5px; font-size: 13px; color: #f5f5f5; } Code (markup): The problem is that it only seems to take the values of the content paragraphs, why is it not displaying different in the footer? Here is the site: Artist Management You can see the footer is using the 15px margin like the content is and I want them to be different. Thanks in advance!
I've simplified your stylesheet: I removed the line-height 80px in the footer, removed all the padding:0px and margin:0px as your first style does all this for you and simplified the margin-left:auto margin-right:auto into margin:0 auto; (0 for top and bottom and auto for left and right) * { margin: 0; padding: 0; } body { background-color: #600; font-family: Tahoma, Geneva, sans-serif; } #wrapper { width: 900px; margin: 0 auto; } #header { width: 900px; height: 100px; background-image: url(/images/header_bg.gif); background-repeat: repeat-x; } #content { width: 890px; background-color: #4e0a0a; padding: 5px; } #footer { width: 900px; text-align: center; margin: 0 auto; clear: both; } /* CSS Menu */ ul#navigation { margin:0 auto; background-color: #000; color: #fff; width: 900px; height: 30px; clear:both; } ul#navigation li { display: inline; } ul#navigation li a { padding: 4px 12px 6px 12px; color: #fff; background-color: #000; text-decoration: none; float: left; } ul#navigation li a:hover { background-color: #930000; color: #fff; text-decoration: none; } /*HEADINGS*/ h1 { color: #e8e8e8; font-size:20px; margin-bottom: 10px; } #content p { margin-bottom: 15px; font-size: 13px; color: #f5f5f5; } #footer p { margin-bottom: 5px; font-size: 13px; color: #f5f5f5; } Code (markup):