Q:

Cannot center text with HTML5/CSS

I am trying simply to center text horizontally in a form as follows:
<!DOCTYPE html>
<html>
   <link rel="stylesheet" type="text/css" href="style.css">
   <div id="contact-form">  
       <head-black>STEWARD'S WEEKLY REPORT</head-black><br>
   </div>  
</html>

contents of style.css:
#contact-form {  
    background-color:#F2F7F9;  
    width:925px;  
    padding:10px;  
    margin: 10px auto;      
    border: 6px solid #8FB5C1;  
    -moz-border-radius:25px;  
    -webkit-border-radius:25px;  
    border-radius:15px;  
    position:relative;  
}  

#contact-form head-black {  
    display:inline-block;
    font-size:14px;  
    text-decoration:underline;
    text-align:center;
}  

The text stays left aligned.

A:

<head-black> is non-standard HTML syntax. Use of custom tags should be avoided. Instead, use:
<h1 class="head-black">STEWARD'S WEEKLY REPORT</h1>

and CSS:
#contact-form {  
    background-color:#F2F7F9;  
    width:925px;  
    padding:10px;  
    margin: 10px auto;      
    border: 6px solid #8FB5C1;  
    -moz-border-radius:25px;  
    -webkit-border-radius:25px;  
    border-radius:15px;  
    position:relative;
    text-align:center; /* put this here */
}  

#contact-form .head-black {  
    display:inline-block;
    font-size:14px;  
    text-decoration:underline;   
}

jsfiddle
Edit
If you'd like to center only the <h1>, simply set it to display: block, and set the text-align: center in the h1 tag. Don't forget to remove the text-align: center from the #content-form CSS block. Do the following to the .head-black CSS:
#contact-form .head-black {  
    display:block;
    font-size:14px;  
    text-decoration:underline;
    text-align: center; 
}

The jsfiddle above shows the new changes.

