Having trouble getting elements to change in HTML - html

Question

I've already run my code through a validator, so there are no syntax errors, but I can't figure out what's going on. Nothing I do changes the "p" elements in my code. I've tried styling the p class. I've tried wrapping them in a "div" tag and stylizing that, but it just seems to keep inheriting the body properties. If I want to style the text at all, I have to do it through the body properties.
Here's the HTML.
<div id="topBar"><img src="images/logo.png" alt="Escaping Shapes"/></div>
<div id="rope"><img src="images/rope2.png" alt="Bottom of logo border"/></div>
<p>Yarrrrgh! Shapes be escaping from below the surface of the Web! Push'em back down below the page as fast as ye can!</p>
<p class="bold">Your time: <span id="time">(not attempted yet)</span></p>
<div id="box">
</div>
Here's the CSS for the body:
body {
width: 100%;
font-family: Verdana, Geneva, sans-serif;
margin: 0;
background-color: #ecf0f1;
font-weight: bold;
text-align: center;
}
Here's the CSS for the "p" element that does NOTHING for me lol.
p {
position: relative;
font-weight: bold;
width: 20px;
margin: auto;
text-align: center;
}
Not sure what's going on, but any help would be greatly appreciated. I can provide more of my code if necessary.
EDIT My Entire CSS:
body {
width: 100%;
font-family: Verdana, Geneva, sans-serif;
margin: 0;
background-color: #ecf0f1;
font-weight: bold;
text-align: center;
}
#topBar {
background-color: #2980b9;
height: 120px;
width: 100%;
position: relative;
}
#topBar img {
display: block;
margin: 0 auto;
width: 600px;
position: relative;
top: 25px;
left: -85px;
}
#box {
background-color: #0ff;
height: 150px;
width: 150px;
display: none;
position: relative;
top: 0;
margin-top: 0;
margin-bottom: 10px;
opacity: 0.9;
box-shadow: 10px 10px 5px #7e7e7e;
-webkit-transition:all 0.1s linear;
-moz-transition:all 0.1s linear ;
-ms-width:all 0.1s linear ;
-o-width:all 0.1s
}
#box:active {
box-shadow: none;
top: 10px;
margin-bottom: 0;
-webkit-transform:scale(0.25, 0.25);
-moz-transform:scale(0.25, 0.25) ;
-ms-width:scale(0.25, 0.25) ;
-o-width:scale(0.25, 0.25) ;
}
#box:hover {
opacity: 1;
}
#rope {
background-repeat: repeat-x;
background-image: url(images/rope2.png);
width: 100%;
position: relative;
top: -25px;
.bold {
font-weight: bold;
}
p {
position: relative;
font-weight: bold;
width: 20px;
margin: auto;
text-align: center;
}

Answer 1

You have not closed off -o-width:all 0.1s
with a semi-colon under your #box css properties This is your problem.
You also haven't closed off your #rope properties }

Answer 2

It seems that the p styles are being applied to the p. I tried by setting the font color via the p rule and it works: http://jsfiddle.net/L2q1Lbzj/
body {
width: 100%;
font-family: Verdana, Geneva, sans-serif;
margin: 0;
background-color: #ecf0f1;
font-weight: bold;
text-align: center;
}
p {
position: relative;
font-weight: bold;
width: 20px;
margin: auto;
text-align: center;
color: red;
}

Answer 3

There is no problem in your css.
The <p> is working good enough in your given code.
CSS properties overlap each other.So be careful about this.
jsfiddle
edit:
as your new edit
you are missing closing }
write
#rope {
background-repeat: repeat-x;
background-image: url(images/rope2.png);
width: 100%;
position: relative;
top: -25px;
}
instead of
rope {
background-repeat: repeat-x;
background-image: url(images/rope2.png);
width: 100%;
position: relative;
top: -25px;
link