CSS img problem

Hi I want to add some space in the Flags images of translator option in www.technobuzz.net (Sidebar - Translate Page )
am not good in CSS, so kindly help me how to do that.
Here is the CSS tag in styles css:--
#translate {
background: #f2f2f2;
width:300px;
float:right;
margin-bottom:10px;
margin-top:0px;
border-bottom:1px solid #E0E0DB;
}
a img {
border:2px;
}
a:hover {
text-decoration:none
}
.flags {
float: left;
width:250px;
margin: 8px 0 10px 0;
padding: 1px 10px 5px 20px;
}
.tgTranslatorFirstRow
{
width:300px;
}
#translate h2{
color: #FFFFFF;
font-family:"Arial";
font-size:17px;
padding-top:8px;
margin:0px 0 0 15px;
border-bottom: 0px solid #ffffff;
}
.flags .tgTranslatorFirstRow {
margin-top:0px;
}






and here is the Div tag from the theme pages


<div id="translate">
<h2> Translate Page</h2>
<div class="flags">
<?php if(function_exists('tgCreateTranslatorBar')) tgCreateTranslatorBar(); ?>
</div>
</div>
Kindly help me please, I want some space in the Flag images...

 

.flags a {
  padding: 0 5px;
}

Code (markup):

Adjust 5px for the gap between the flags you require, it works on Firefox you'll need to check other browsers.

 

Still Now working

 

try

.flags a {
padding-right: 5px;
}

or you can edit your html directly at your links and add style="border: 0pt none ; padding-right: 10px;"

 

It doesn't look like you added the CSS I gave you to your files, I checked all for that .flags a rule, are you sure you uploaded your files after editing?

 

Thanks it working now. kindly let me know how to change the background of the that translation part ( From white to gray )

here is the code

#sidebar .flags a {
padding: 0 5px;
}

 

Best I can see is:

.flags {
background-color: #eee;
}

Code (markup):

For anything much better than that I think it's going to need changes to the HTML as well.