L'égalité de marge sur les deux côtés de l'élément en responsive layout

Salut, je suis en train de créer un réactif de mise en page où j'ai trois différents éléments sur la taille et je veux une marge égale sur les deux côtés du milieu de l'élément pour tous les écrans.

Voici mon code HTML et CSS

<section class="container">
    <div href="/" class="pull-left logo"><img src="/images/logo.jpg"></a>
    <div class="slogan pull-left"><img src="/images/slogan.jpg"></div>
    <div class="pull-left support"></div>
</section>

<style>
 .pull-left
{
  float-left;
}
.slogan 
{
  margin: 0 17%;
}    
</style>

Depuis le logo et les sections de support sont de taille fixe. Au-dessus de Css fonctionne très bien pour une résolution, mais comme la taille de l'écran passe en bas de la marge ne reste pas même.

Toutes les idées de comment y parvenir?

EDIT: Voici le violon. http://jsfiddle.net/VdYua/22/
D'abord il y a autant de marge de chaque côté .slogan div. Mais sur la reconstitution de la taille de la dernière div va à la ligne suivante. Je veux la marge a diminué sans freinage de mise en page.

Je veux de la marge de même sur les deux côtés de l'class="slogan".Il peut varier pour différentes résolutions d'écran.
Donner la largeur de votre .slogan div
Si vous pouvez fournir un jsFiddle du problème, il serait également utile.
mise à jour avec un violon

OriginalL'auteur Sanjeev | 2013-01-15