Besoin d'aide! barre de recherche

Bonjour,
Je suis en train de faire un moteur de recherche (recherche personnalisée Google) et la barre de recherche est très longue j'aimerai la rétrécir... comment je fais.
Voici l'image:


et voici mon code:

<title>PanpleKi</title>
<p><a title="Log In" href="https://accounts.google.com/signin/v2/identifier?flowName=GlifWebSignIn&flowEntry=ServiceLogin"><span style="color: #ff0000;"><strong><img src="https://www.gs1.org/1/gtinrules/images/gs1-user-grey.png" alt="" width="39" height="40" /></strong></span></a></p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p><span style="color: #ff0000;"><strong><img style="display: block; margin-left: auto; margin-right: auto;" src="https://upload.wikimedia.org/wikipedia/commons/0/01/Panpleki.png" /></strong></span></p>
<p style="text-align: center;"> </p>


<script id="bar">
  (function() {
    var cx = '014505356402905116764:15zfm0nngb4';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:search></gcse:search>
<link rel="icon" href="favicon.ico" />

Merci d'avance

EDIT : Ajout des balises de code