add someting like this at the end of style.css of your theme:
.wp-pagenavi span, .wp-pagenavi a { margin-right:5px; }
.wp-pagenavi .pages { margin-right:15px; }
Sorry mate, it didn’t work.
sometimes it needs to refresh the browser cache by pressing ‘reload’ or by pressing CTRL and F5 at the same time, to make changes in css visible.
i am doing the testing in firefox, with the developer add-on, which are pretty good tools for debugging and tweaking css issues.
another way is to look into the html code from the browser, identify the tags, ids, or classes that define the text or elements that you would like to change, and then make the corresponding changes to the css files of your theme.
ref: http://www.w3schools.com/css/
Actually, it did work. Thanks a lot for the help.