CSS not styling the DIV correctly when styled text is entered

Question

I'm trying to format text that is in a DIV, however, I also want to style the DIV.

In the PHP page I have the DIV and the text:

<div id="main-content">
    <h1>Welcome to the Drug Debate!</h1>
    <p>Home of facts and deabtes of legal and illegal drugs!The Drug debate offers a safe and relaxed enviroment where you will be able to find information and facts about different types of drug </p>
</div>

Then in my CSS I am trying to style that DIV using:

#main-content{
background-color: #FFFFFF;
width:600px;
height: 350px;
margin: 0 auto;
border:solid;
}

and the <h1> and <p> using:

h1 {
 font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
 font-size:24px;
 padding-left:200px;

}

(and similar for <p>)

This is creating problems, such as the background colour for the DIV isn't applying behind the text?

(please bear in mind i'm quite new to coding and this site!!)

Answer 1

The default background color property is transparent, which is why you see the background color from your universal selector coming through. Simply add background-color:inherit; to your CSS.

h1, p {
    font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    font-size:24px;
    padding-left:200px;
    background-color:inherit;
}

jsFiddle example