Problème d'affichage incorrect des boutons Google+ et Twitter

Bonjour,
j'ai inséré dans les pieds de page (footer) de mon site des boutons Google+ et Twitter.

Le résultat est désastreux comme vous pouvez le voir en bas des pages de mon site http://www.gite-la-rochelle-les-dimeries.fr/ : de gros et très laids rectangles blancs s'affichent sous ces boutons.

Les codes des boutons eux mêmes ne sont pas en cause puisque, affichés dans la page et pas dans le pied de page, ces boutons s'affichent sans aucun problème.

Le problème vient très probabement du code CSS, enfin j'imagine.

J'ai eu beau essayé de comprendre ce qui se passe et faire des tests depuis hier matin, je tourne en rond et je n'ai toujours pas trouvé le pourquoi du problème et donc la façon d'y remédier.

Je fais donc appel aux génies du CSS et du HTML qui voudront bien m'aider.

Par avance, merci beaucoup de votre aide.

Voici code CSS responsive :

*/@-ms-viewport{width:device-width;} /* http://msdn.microsoft.com/en-gb/library/ie/hh869615%28v=vs.85%29.aspx *//* 240 + 320px */@media screen and (min-width:180px) and (max-width:360px) {around#header, #topnav, #intro, #container, #footer, #copyright{max-width:95%; margin:0 auto;}#topnav ul{display:none;}aroundform input[type="submit"]{margin-bottom:10px;}.one_half, .one_half.nogutter, around.one_third, .two_third, .one_third.nogutter, .two_third.nogutter, around.one_quarter, .two_quarter, .three_quarter, .one_quarter.nogutter, .two_quarter.nogutter, .three_quarter.nogutter, around.one_fifth, .two_fifth, .three_fifth, .four_fifth, .one_fifth.nogutter, .two_fifth.nogutter, .three_fifth.nogutter, .four_fifth.nogutter, around.one_sixth, .two_sixth, .three_sixth, .four_sixth, .five_sixth, .one_sixth.nogutter, .two_sixth.nogutter, .three_sixth.nogutter, .four_sixth.nogutter, .five_sixth.nogutter{display:block; float:none; width:auto; margin:0 0 5% 0; padding:0;}#header hgroup, #header #header-contact{display:block; width:100%; float:none; margin:0 0 15px 0; padding:0; text-align:center;}around#header #header-contact{margin:30px 0 0 0;}around#header #header-contact li{display:block; margin:15px 0 0 0; padding:0; border:none;}around#header #header-contact li:first-child{margin:0;}.calltoaction div{margin-top:30px;}around.calltoaction div:first-child{margin-top:0;}around.calltoaction.opt4{font-size:1.5em;}#blog-post #comment-count div{float:none; margin-top:10px; text-align:center;}around#blog-post #comment-count div:first-child{margin-top:0;}around#blog-post .list.block li > ul, #blog-post .list.block li > ol{margin:0; padding:0; list-style:none; border:none;}#fof{padding:30px 0 0 0;}around#fof h1{margin:0 0 20px 0; font-size:7em;}around#fof h2{margin:0 0 20px 0; font-size:2em;}#footer div{margin-bottom:5%;}around#footer #ft_gallery li, #footer #ft_gallery .first{display:inline-block; float:left; width:auto; margin:0 10px 10px 0; padding:0; clear:none;}around#footer #ft_gallery li img{}#header, #copyright{text-align:center;}around#copyright p{float:none; line-height:1.6em;}around#copyright p:first-child{margin-bottom:8px;}around}/* 480px */@media screen and (min-width:361px) and (max-width:615px) {around#header, #topnav, #intro, #container, #footer, #copyright{max-width:95%; margin:0 auto;}#topnav ul{display:none;}aroundform input[type="submit"]{margin-bottom:10px;}.one_half, .one_half.nogutter, around.one_third, .two_third, .one_third.nogutter, .two_third.nogutter, around.one_quarter, .two_quarter, .three_quarter, .one_quarter.nogutter, .two_quarter.nogutter, .three_quarter.nogutter, around.one_fifth, .two_fifth, .three_fifth, .four_fifth, .one_fifth.nogutter, .two_fifth.nogutter, .three_fifth.nogutter, .four_fifth.nogutter, around.one_sixth, .two_sixth, .three_sixth, .four_sixth, .five_sixth, .one_sixth.nogutter, .two_sixth.nogutter, .three_sixth.nogutter, .four_sixth.nogutter, .five_sixth.nogutter{display:block; float:none; width:auto; margin:0 0 5% 0; padding:0;}#header hgroup, #header #header-contact{display:block; width:100%; float:none; margin:0 0 15px 0; padding:0;}around#header #header-contact{margin:30px 0 0 0;}#sidebar_2 ul.nospace li{display:inline; float:left; width:30%; margin:0 0 0 5%;}around#sidebar_2 ul.nospace li:first-child{margin-left:0;}#contact .contact_details > div{display:block; float:none; margin-left:0;}.calltoaction div{margin-top:30px;}around.calltoaction div:first-child{margin-top:0;}#fof{padding:30px 0 0 0;}around#fof h1{margin:0 0 20px 0; font-size:7em;}around#fof h2{margin:0 0 20px 0; font-size:2em;}#footer div{margin-bottom:5%;}around#footer #ft_gallery li, #footer #ft_gallery .first{display:inline-block; float:left; width:auto; margin:0 10px 10px 0; padding:0; clear:none;}#copyright p{float:none;}around#copyright p:first-child{margin-bottom:8px;}around}/* 768px */@media screen and (min-width:616px) and (max-width:800px) {around#header, #topnav, #intro, #container, #footer, #copyright{max-width:95%; margin:0 auto;}#topnav ul{display:none;}aroundform input[type="submit"]{margin-bottom:10px;}.calltoaction.opt4 div{display:block; float:none; width:100%; margin:30px 0 0 0;}around.calltoaction.opt4 div:first-child{margin-top:0; text-align:center;}around.calltoaction.opt4{font-size:1.5em;}#fof{padding:30px 0 0 0;}around#fof h1{margin-top:0; font-size:12em;}around#fof h2{margin-top:0;}around}/* 960px */@media screen and (min-width:960px) {around#header, #topnav, #intro, #container, #footer, #copyright{max-width:95%; margin:0 auto;}around}/* 1028px */@media screen and (min-width:1028px) {around#header, #topnav, #intro, #container, #footer, #copyright{max-width:95%; margin:0 auto;}around}/* 1200px */@media screen and (min-width:1200px) {aroundbody.boxed .wrapper{max-width:1140px;}around#header, #topnav, #intro, #container, #footer, #copyright, .stretched{max-width:1200px; margin:0 auto;}around}/* Hide The Jquery Generated Navigation Form from 801px upwards */@media screen and (min-width:801px) and (max-width:10000px) {around#topnav form{display:none;}around}/* Resize Extended Box */@media screen and (min-width:1501px) {aroundbody.boxed .wrapper .stretched{margin-left:-2.6%; margin-right:-2.6%;}around}around
```Pour le code HTML complet de la page, il suffit de l'afficher à partir de la page donnée en exemple.
Voici la portion de code qui affiche correctement le badge Google+ dans la page (dans la partie <div class="wrapper row3 clear"><div id="container"><!--** Page gauche*** --><div class="three_quarter first">) :

<!-- Contenu -->around<div class="wrapper row3 clear">around<div id="container">around<!-- Page gauche -->around<div class="three_quarter first">around<img class="imgr" src="http://www.gite-la-rochelle-les-dimeries.fr/photos/Claude_et_Alain.jpg" alt="Claude et Alain CHAZOT - Propriétaires du gîte Les Dimeries à La Rochelle" title="Claude et Alain - Gîte Les Dimeries - La Rochelle"/> around<h2>Claude et Alain vous accueillent à Dompierre-sur-mer dans leur gîte Les Dimeries à 10 km de La Rochelle.</h2> around<p>Les Dimeries, c'est un <strong>gîte</strong> à Dompierre sur mer, idéalement situé pour découvrir La Rochelle, les îles de Ré et d'Aix, le marais poitevin tout proche durant vos vacances. Les premières plages sont à 15 minutes en voiture.</p>around<p>Le gîte peut accueillir 2 personnes. Cette location saisonnière de 24m² est confortable et décorée avec goût. L'hébergement, ouvert toute l'année, est composé d'une chambre avec douche et d'un salon avec coin cuisine. Il dispose aussi d'un jardin ombragé et fleuri.</p>around<p>Les prix, très raisonnables, varient de 250 à 360 € par semaine en fonction de la période de location.</p>around<p>Claude et Alain proposent une <strong>location de vacances</strong> coquette et confortable, juste à côté de <strong>La Rochelle</strong> (à 10 minutes en voiture) et à 15 minutes de l'<strong>île de Ré.</strong></p><h2>Claude et Alain vous hébergent dans leur location saisonnière</h2>around<p>Ils aiment recevoir et faire partager leur amour de la <strong>Charente-Maritime</strong>, de l'<strong>île de Ré</strong> et du <strong>marais poitevin</strong>.</p>around<p>Ils seront ravis de vous accueillir à <strong>Dompierre sur mer</strong> .</p>around<p>Ils vous renseigneront avec plaisir sur les très nombreuses activités et sites à visiter à proximité du gîte durant votre séjour.</p><h2>Le gîte Les Dimeries est situé à Dompierre sur mer en Charente maritime (17)</h2>around<figure class="boxholder"><img src='http://www.gite-la-rochelle-les-dimeries.fr/photos/gite-les-dimeries-la-rochelle-plan-d-acces.jpg' alt="plan d'accès au gîte Les Dimeries" title="Plan d'accès au gîte Les Dimeries"/></figure>around<p>Dompierre sur mer est un village calme, doté de nombreux commerces de proximité (deux boulangeries, une boucherie, une pharmacie, un cabinet médical, un dentiste, etc) et d'un petit supermarché à deux pas de la maison. Chaque dimanche, des producteurs locaux d’huîtres, de moules et de légumes viennent s’installer sur la place du marché.</p>around<figure class="imgr"><img src="https://lh6.googleusercontent.com/JR3vfmpn9RMf93nwafi3SMY30A9N_i12aZVvkWlKGg=w276-h184-p-no" alt="marché de Dompierre sur mer" title="marché de Dompierre sur mer"></figure>around<figure class="imgl"><img src="https://lh5.googleusercontent.com/RFzvtlpiHkUv3qLlk9jOnGp4wTuxC-Alak8Ek9BbmQ=w295-h221-p-no" alt="marché de Dompierre sur mer" title="marché de Dompierre sur mer"></figure>around<p class="clear">Notre gîte est situé dans un lotissement calme, dans une partie de notre maison. Il possède une entrée indépendante et donne sur le jardin où vous pourrez prendre vos repas à l'ombre du pin maritime. Il y a la possibilité de garer les voitures juste devant, gratuitement.</p><h2>Composition du gîte Les Dimeries.</h2>around<p>La location est composée </p>around<ul class="list indent disc">around<li>d'un salon avec kitchenette,</li>around<li>d'une chambre avec douche et vasque</li>around<li>d'un WC séparé.</li>around</ul>around<h2>Autres points sur Les Dimeries</h2>around<p>Le linge de toilette et les draps sont fournis.</p>around<p>La location est non-fumeur (possibilité de fumer à l'extérieur).</p>around<p>Durant la période estivale et les <strong>vacances</strong> scolaires, nous louons à la semaine. Hors-saison, nous louons aussi à la nuitée.</p>around<p>Avantage par rapport à l'hôtel ou à une chambre d'hôtes : vous pourrez cuisiner vos repas et vos petits-déjeuners, à moins que vous préfériez profiter de la formule bed-and-breakfast que propose Claude.</p>around<p>Bonne visite !</p>around<p>Claude et Alain</p>around<aside style="display:inline;"><div class="g-person" around data-href="//plus.google.com/u/0/117272604062691626418" around data-rel="author"around data-layout="landscape"around data-width="240"around data-height="50">around</div></aside>around</div> around<!--** Fin page gauche* -->aroundVoici la partie de code qui affiche les boutons dans le footer. C'est celle qui merdoiearound<div class="wrapper row2 clear">around<div id="footer">around<!-- Navigation sur le site **-->around<!-- Placez cette balise dans l'en-tête ou juste avant la balise de fermeture du corps de texte. -->around<script src="https://apis.google.com/js/platform.js" async defer>around {lang: 'fr'}around</script>around<div class="one_quarter first">around<h2 class="footer_title">Les blogs de Claude et Alain <img src="http://www.gite-la-rochelle-les-dimeries.fr/images/blog-20x20.png" alt="Blog de pêche Alain17 + blog gîte Les Dimeries + blog de voyages de Claude" title="Blog de pêche Alain17 + blog gîte Les Dimeries + blog de voyages de Claude"></h2>around<figure class="imgl boxholder"><a href="http://www.gite-la-rochelle-les-dimeries.fr/gite-charente-maritime-blog.php"><img class="imgl" src="http://www.gite-la-rochelle-les-dimeries.fr/galeries-photos/300x300/la-rochelle.jpg" alt="Blog gîte Les Dimeries" title="Blog du gîte Les Dimeries">Le blog du gîte Les Dimeries : à voir, à faire dans la région</a></figure>around<figure class="imgl boxholder"><a href="http://www.gite-la-rochelle-les-dimeries.fr/blog-voyages-claude17/index.php"><img class="imgl" src="http://www.gite-la-rochelle-les-dimeries.fr/photos/claude-80-80.png" alt="Blog des voyages de Claude" title="Blog des voyages de Claude">Le blog des voyages de Claude</a></figure>around<figure class="imgl boxholder"><a href="http://www.gite-la-rochelle-les-dimeries.fr/blog-peche-en-mer-en-kayak-alain17/index.php"><img class="imgl" src="http://www.gite-la-rochelle-les-dimeries.fr/photos/alain17-80-80.png" alt="Le blog de pêche en mer d'Alain 17" title="Le blog de pêche en mer d'Alain 17">Le blog de pêche en mer d'Alain</a></figure>around<aside style="display:inline;"><div class="g-person" around data-href="//plus.google.com/u/0/117272604062691626418" around data-rel="author"around data-layout="landscape"around data-width="240"around data-height="50">around</div></aside>around</div>

Une dernière précision (enfin, plutôt un second problème !) : quand on regarde bien l'écran de la page, en haut à gauche, il y a un trait blanc vertical affiché. Ce trait blanc disparaît lorsque j'enlève le code des boutons Google et Twitter. Pourquoi ?
Cordialement