Comment faire pour Modifier La Largeur ou de la Hauteur De la Zone de Recherche

Je vais avoir des problèmes avec ce formulaire, j'étais en train de créer. J'ai commencé à travailler sur un projet ancien et a décidé de repartir sur de la ferraille et le code. Le projet a été un centre de loisirs de la page d'accueil de Google de conception. Je voulais avoir une conception exacte, sauf pour certaines choses qui ne sont pas vraiment nécessaires. La zone de recherche (formulaire) déplacé juste là où je voulais, mais parce que le nouveau logo, j'ai dû placer mon champ de recherche sur la main lors de l'animation. Le problème est que mes coordonnées sont comment je le voulais, mais la hauteur et la largeur ne change pas. C'est tout mon code entier:

<!DOCTYPE HTML>
<HTML>
    <head>
        <title>Google</title>
        <style>
            .GoogleLogo {
                position:absolute;
                TOP:125px;
                LEFT:575px;
            }

            .SearchBar {
                position: absolute;
                top: 355px;
                left: 575px;
                height: 30px;
                width: 50px;
            }

        </style>
    </head>
    <body>

        <div class="GoogleLogo">
            <a href="https://www.google.com/?gws_rd=ssl#q=Google+logo+history&hl=en&oi=ddle"><img src="../../Pictures/Google2.gif" alt="Google" width="400" height="231" border="0" /></a>
        </div>

        <div class="SearchBar">
            <form>
                            <input type="text" placeholder="Search..." required>
            </form>
        </div>

    </body>
</HTML>

Est-il un moyen de modifier la hauteur et la largeur sans "abîmer" quoi que ce soit. Je veux la classe, .SearchBar, pour répondre à mon codage dont j'ai changé la hauteur et la largeur. Je l'ai changé pour 550 pixels, et il ne fonctionne toujours pas, merci de prendre le temps de lire ce.