Issue with stylizing a custom widget area

Hi,

I am facing this issue:

I created a custom widget area by placing the following code in my functions.php file:

if ( function_exists('register_sidebar') )
    register_sidebar( array(
   'name' => __( 'header-widget'),
   'id' => 'mycustomwidgetarea',
   'description' => __( 'An optional widget area for your site footer', 'twentyeleven' ),
   'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
   'after_widget' =>  '</li>',
   'before_title' => '<h3 class="widget-title">',
   'after_title' => '</h3>',
   ) );

And then I called the widget in the header.php file:

<?php
 // Custom widget Area Start
 if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('mycustomwidgetarea') ) : ?>
<?php endif;
// Custom widget Area End
?>

Finally, I stylized the widget in the custom.css area:

.lang-item {

    position: relative;

    display: inline;

    top: 10px;

    left: 50%;

Right now the flags are in the middle of the page. I am trying to place them on top of the logo.

For some reason, when I place the flags in the middle of the page, they stay in the middle, as they should, but when I am trying to change the “left” attribute to 30%, the flags change position according to the width of the browser, as shown in the caption below:

http://img255.imageshack.us/img255/9340/51185452.jpg

How is it possible to make the flags stay on top of the logo no matter what?

Any suggestions are appreciated,
Aliki
http://www.opensolution.gr

PS. The translation plugin that I am using is Polylang.