Trying to control width and right-align, only one works

Question

My knowledge of CSS is almost non-existent, but I'm trying to spruce up a Wordpress site and can't seem to get my text to be both a certain width and right aligned. Either one works on its own, but when I use

p{text-align: right;}
p {height:100px; width:300px;}

the width is correct but the alignment goes back to default (left). I'm sure this is not even how to make this effect work, but again this is pretty foreign to me and I appreciate any help.

The Wordpress theme has a box for custom CSS, and just for the sake of completeness this is everything I'm using:

body {color:#757575;}
h1.site-title {color:#ff0000;}
p{font-family: Verdana, Geneva, sans-serif;}
p{text-align: right;}
p {height:100px; width:300px;}
h1.site-title {
font-family: Century Gothic, sans-serif;}
h2{font-family: Century Gothic, sans-serif;}
h2{color:#000000;}
h2{text-align:right}
nav {font-family: Century Gothic, sans-serif;}
a:link {color:#000000;}
a:visited {color:#000000;}
a:hover {color:#000000;}
a:active {color:#000000;}

Answer 1

Maybe the Wordpress css has a css rule that overrides yours. Keep in mind that if the theme css have eg. this css rule:

.paragraph p{
  text-align: left;
}

and below that you add this rule:

p{
  text-align: right;
}

Even if you put your rule as the last one, it has lesser priority than the theme one so the css rule applied will be the theme one. Try to add the modifier important! so you'll have:

p{
  text-align: right !important;
}

Answer 2

First, I'd recommend organizing your CSS so that all the P tags and all the H2 tags are in one set like changing this:

p {font-family: Verdana, Geneva, sans-serif;}
p {text-align: right;}
p {height:100px; width:300px;}

to

p { font-family: Verdana, Geneva, sans-serif; text-align: right; height:100px; width:300px; }

Next, there could be a theme issue. If you do want all of your paragraphs to align right on the entire site, adding the "!important" as Erwin suggested most likely will fix that.