I want to create a headline (h2) with an image at the right-most area of the bounding box. I have the layout almost right except I can't push the image a little bit to the right of the element's bounding box -- how would I tweak my css so it is displayed correctly?

I'm trying to do something like this:

[{someHeadLineText}{dynamic space            }{image}{5px space}]

where the [] indicate the total available width of my content.

Html:

<div class="primaryHeader">             
  <h2>News</h2>             
</div>

Css:

.primaryHeader h2 {
   background-color: green; /* the header looks like a box */
   color: black;    
   background: transparent url(../images/edit.png) no-repeat right center;
   border: 1px solid red;
}

I am placing the image to the right of my h2 element and centered vertically -- but how do I adjust the placement of the background image?