Décalage du champs de recherche

Bonjour tout le monde !

Je dois intégrer un champs de recherche avec Google CSE, le moteur de recherche Google.

Lors de son intégration sur le site, tout est stylisé comme il faut sauf au moment de la saisie. Puisqu'une image vaut plus que des mots, voici le problème en question :


Et voici mon code CSS mit en place pour stylisé l'input :

<style>
 input.gsc-input,
 .gsc-input-box,
 .gsc-input-box-hover,
 .gsc-input-box-focus,
 .gsc-search-button {
  box-sizing: content-box; 
  line-height: normal;
 }
      
 input.gsc-input,
 .gsc-input-box,
 .gsc-input-box-hover,
 .gsc-input-box-focus {
  width: 300px;
 }
   
 #gs_id50,
 #gs_id50 tbody,
 #gs_id50 tbody tr,
 #gs_id50 tbody tr td{
  height: 20px !important;
 }
</style>
      
<li class='dropdown'>
 <a data-toggle='dropdown' class='dropdown-toggle' href='#'>
  <span class='glyphicon glyphicon-search'></span>
 </a>
 <div class='dropdown-menu'>
  <gcse:search></gcse:search>
 </div>
</li>

Si quelqu'un peut m'aider à mettre en place un style CSS qui puisse me corriger ça, je lui en serais reconnaissant. Merci !