having background trouble in css

[i can spell html5!]

I have 10 smaller sections that make my middle section on a webpage Im working on and Im having trouble changing the background color of each individual section. it just comes out completely garbled. 

 <a href="main_section1">
  <section id="main_section1">
  <article>
  <header>
  <hgroup>
  <h1>Ace-King</h1>
  <h2> How to play Ace king</h2>
  </hgroup>
  <p>Considerations of hold'ems most notorious hand and why players hate it so much</p>
  </article> 
  </a>

 

and the css    (note Im just trying different colors to see if there's any effect)

 

 #main_section1{
 background-color:green;
 text-color:red;
  position: absolute;
     left: 629px;
   top: 373px;
  float: left;
  width: 287px;
  margin: 20px; /*720px (.i.e 660 + leftside 30 + rightside 30, 280 remaining(1000-720)*/
 }

 

 

 

 

[Ingolme]

What do you mean by "garbled"? A background color may not be visible if all of the element's children are floated or given an absolute position.

There is no text-color property, it's just called color.