Title Wont Center - html

Question

The story title is not centering, when I change it to h1, it just disappears. I am really not sure why this is.
storytitle {
background-color: black;
font-color: #ff0000;
font-size: 150%;
text-align: center;
}
ree {
background-color: black;
color: #0000ff;
font-size: 100%;
text-align: right;
}
body {
background-color: black;
}
<title>Story2</title>
<storytitle style="color:red;text-align:center">
THiS IS A TEST TITLE </br>
</storytitle>
<ree>
this is a test body
</ree>

Answer 1

Your basic problem is that you are not writing HTML.
Error recovery in browsers will create a storytitle element with some default styling that includes display: inline.
The text-align property does not apply to inline elements.
The solution is to write valid HTML. If you use an h1 element (all else being equal) it will not disappear and, being display: block by default, the text-align property will apply.
h1{
background-color:black;
font-color:#ff0000 ;
font-size:150%;
text-align:center;
}
p{
background-color:black;
color:#0000ff;
font-size:100%;
text-align:right;
}
body{
background-color:black;
}
<h1 style="color:red;text-align:center">THiS IS A TEST TITLE</h1>
<p>this is a test paragraph</p>

Answer 2

There are a lot of mistakes:
The HTML tags weren't valid HTML tags
I changed the tags to h1, h2 and p (headers and paragraph).
I assumed you wanted to use story, storytitle and ree as classes, so I did that for you in the code below.
The styling was redundant
on your "storytitle" you had the styles color: red and text-align: center, but they were already applied in your <style></style>
</br> is an end tag but doesn't exist, it's <br> and <br /> in HTML5.
The black background-color on your body was enough to give our page a black background. Applying the same color background to your elements is in this case unnecessary.
Here is the updated version with correct HTML and styling:
body {
background-color: black;
}
.title {
color: yellow;
text-align: center;
}
.storytitle {
color: #ff0000;
font-size: 150%;
text-align: center;
}
.ree {
color: #0000ff;
font-size: 100%;
text-align: right;
}
<h1 class="title">Story2</h1>
<h2 class="storytitle">
THIS IS A TEST TITLE
</h2>
<br />
<p class="ree">
this is a test body
</p>