CSS styling not taking effect

Question

Here's the HTML:

<div id="contact-details">
    <p id="contact-details-first">
        <h3>Address:</h3>
        <ul>
            <li>238 Parsley</li>
            <li>Annlin, Pretoria</li>
            <li>South Africa</li>
        </ul>
    </p>
</div>

and here's the CSS:

#contact-details {
    width: 80%;
    background-color: #ddd;
    margin: auto;
}

#contact-details-first > h3 {
    display: inline-block;
    float: left;
    border: 1px solid yellow;
}

#contact-details-first > ul {
    position: relative;
    left: 100px;
    border: 2px solid blue;
}

For some reason the bottom two css style don't take effect.

#contact-details-first > h3
#contact-details-first > ul

Answer 1

You cannot nest block elements inside paragraphs.

It works if you change the p with div, like this:

#contact-details {
    width: 80%;
    background-color: #ddd;
    margin: auto;
}

#contact-details-first > h3 {
    display: inline-block;
    float: left;
    border: 1px solid yellow;
}

#contact-details-first > ul {
    position: relative;
    left: 100px;
    border: 2px solid blue;
}

<div id="contact-details">
<div id="contact-details-first">
	<h3>Address:</h3>
	<ul>
		<li>238 Parsley</li>
		<li>Annlin, Pretoria</li>
		<li>South Africa</li>
	</ul>
</div>
</div>