CSS Problem With Header Text

I have some text I have put in a div that I want to the right of the image at http://www.theherbsplace.com/prestashop/

I need the text to be centered on the end of the image but the margin-top won't push the div down.  I am having to use display:inline for the div to position it at the end of the image.  I need to keep this responsive is why I didn't want to use the position statement.

I also need the text below the image to be 10 px below and the space between the 2 paragraphs to not be so large.  I thought I was overriding the global.css p declaration but it doesn't change anything.

This is the code I am using to override the theme's css

#editorial_block_center #editorial_main_image {
  float:left;
  margin-left:0px;
  margin-right:14px;
}
.rte p{
  font-size:16px;
}
.rte div.header_text {
  color:#336633;
  font-size:18px;
  margin-bottom:45px;
  width:350px;
  display:inline;
  margin-top:40px;
}
#editorial_block_center .rte p {
clear:both;
  margin-top:10px;
  margin-bottom:0px;
}
div.header_text li {
  margin-bottom:10px;
}
div.header_text ul {
  list-style-type:none;
}

Select all Open in new window

So please help me to get this looking better and spaced evenly.

Thanks,

Randal