Wordpress header CSS styling

HTML

<div id="page" class="hfeed site">
  	<header id="masthead" class="site-header" role="banner">
		<nav role="navigation" class="site-navigation main-navigation">
			<h1 class="assistive-text">Menu</h1>
			<div class="assistive-text skip-link"><a href="#content" title="Skip to content">Skip to content</a></div>

			<div class="menu"><ul><li class="current_page_item"><a href="http://mainecivichackday.com/" title="Home">Home</a></li><li class="page_item page-item-1"><a href="http://mainecivichackday.com/about/">About</a></li><li class="page_item page-item-20"><a href="http://mainecivichackday.com/participate/">Participate</a></li><li class="page_item page-item-24"><a href="http://mainecivichackday.com/solve/">Solve</a></li><li class="page_item page-item-9"><a href="http://mainecivichackday.com/contact/">Contact</a></li></ul></div>
		</nav><!-- .site-navigation .main-navigation -->
		<hgroup>
			<h1 class="site-title"><a href="http://mainecivichackday.com/" title="Maine Civic Hack Day" rel="home">Maine Civic Hack Day</a></h1>
			<h2 class="site-description">Hacking for a Better Tomorrow, June 1st &amp; 2nd 2013</h2>
		</hgroup>
	</header><!-- #masthead .site-header -->

My CSS Experiment

h1.site-title
{
    background-color:black;
    background-color:rgba(255,0,0,0.5);
    max-height:100px;
    width:600px;
    height:90px;
    overflow:hidden;
}
h2.site-description
{
    background-color:black;
    background-color:rgba(255,0,0,0.5)
}