Problem is viewable at this link. http://dansdemos.info/prototypes/htmlSamples/responsive/step08_megaGridForward.html

The three boxes need to have green backgrounds, but another style is taking precedence. I thought styles were supposed to take precedence based on where they appear in the style sheets, with styles lower in the style sheet cascading (taking precedence) over styles higher in the style sheet. I guess that is wrong, because the style sheet for the background colors of those boxes is here:

    #maincontent .col {
    background: #ccc;
    background: rgba(204, 204, 204, 0.85);

}

#callout1   {
    background-color: #00B300;
    text-align:center;
}
#callout2   {
    background-color: #00CC00;
    text-align:center;
}
#callout3   {
    background-color: #00E600;
    text-align:center;
}

When the style for "#maincontent .col" is removed, the green shows up (link)http://dansdemos.info/prototypes/htmlSamples/responsive/step08_megaGridForwardGreen.html, but I thought the green should show up because it is after the gray color specified higher up.

I am finding a way to get what I need, but it would really make it a lot easier if I understood why the backgrounds are gray, instead of green.

Any assistance would be extremely much appreciated. Thank you.