WordPress CSS pain!

[Django x2]

Hi All,

I've started doing a wordpress template but my CSS skills are failing me.

This is the header

<div id="page" class="hfeed site">
     <header id="masthead" class="site-header" role="banner">
          <hgroup class="site-image"><img src="wp-content/themes/Euro/images/Languages1.png" />
     <h1 class="site-title"><a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
     <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
</hgroup>

and this is the relevant CSS

/* =Site Header
----------------------------------------------- */

.site-header hgroup {
	background: #33605a;
	padding: 1.5em 2em;
}
.site-title {
	font-size: 45px;
	font-size: 4.5rem;
	font-style: italic;
}
.site-description {
	font-size: 13px;
	font-size: 1.3rem;	
}
.site-title a,
.site-description {
	color: #e9e0d1;
}

.site-image {
	float: right;
	height: 100px;
	width: 100px;
}

What I'm trying to do is to get the "Euro" Languages.png image to align to the right within the header. but for the life of me, it won't sit nicely and either expands the header height, or just goes anywhere but right. It should be logo text on the left, image aligned to the right.

Can anyone see what's gone wrong?

Thanks

 

[agent_paul]

change .site-header hgroup { ... to .site-header { ... and get rid of the padding if you want
then change .site-image {
float: right;
height: 100px;
width: 100px;
}...

to

img {
float: right;
}

 

[agent_paul]

if your working on a site that can be accessed publicly then please send a link. it would probably be easier for people to edit the css in browser