چرایی چسبیدن دکمه Sign in به گوشه سمت راست بالای صفحه در طراحی صفحه گوگل

سلام

دوستان من هرچه قدر فکر کردم نفهمیدم که مشکل این کد من از کجاست که من وقتی صفحه رو با هر ابعادی بازش می کنم؛این دکمه sign in  و دیگر قضایا،

 به گوشه سمت راست بالای صفحه در همون اندازه می چسبه و اصلا یک جای ثابت همون طور که استاد آقاجانی تو آموزش ها انجام داده بودن  نمی گیره.

مشکل من کجاست؟!

یعنی واس من اینطوری میشه :

 ولی من میخوام همیشه اونجا بچسبه:

اینم کده منه:

 <html>
 <head>
 <title>Google</title>
 <style>
 *{
 padding: 0px;
 margin: 0px;
 }
 
 body{
 background-color:#fff;
 font-family: arial,sans-serif;
 font-size: 13px;
 height:100%;
 width: 100%;
 }
 input{
 width: 600px;
 height: 50px;
 padding: 5px 10px;
 border: 1px solid #cdcdcd;
 box-shadow:0px 1px 3px #e5e5e5;
 border-radius: 1px;
 
 }
 input:hover{
 box-shadow:3px 5px 8px #e3e3e3;
 
 }
 #center{
 position: absolute;
 top: 250px;
 text-align: center;
 left: 35%;
 

 }
 .cent-btn{
 background-color: #f4f4f4;
 color: #757575;
 border-radius: 2px;
 padding: 10px 20px;
 font-weight: bold;
 }
 .cent-btn:hover{
 background-color: #f7f7f7;
 color: #222222;
 box-shadow: 0px 1px 3px #f6f6f6;
 border:1px solid #c6c6c6;
 border-radius: 2px;
 

 }
 .top-left{
 cursor:pointer;
 color: #404040;
 
 
 }
 .top-left:hover{
 text-decoration:underline;
 
 }
 #top{
 float:right;
 clear:both;
 margin: 10px;
 
 }
 #option{
 background-image: url('i1_1967ca6a.png');
 background-size: 528px 68px;
 background-position: -132px -38px;
 opacity: 0.55;
 width: 30px;
 height: 30px;
 display:inline-block;
 vertical-align:middle;
 cursor:pointer;
 }
 #option:hover{
 opacity: 1.0;
 
 }
 #sign-in{
 background-color: #4684ed;
 color: #ffffff;
 border-radius: 2px;
 padding: 10px 20px;
 font-weight:bold;
 
 }
 #sign-in:hover{
 box-shadow: 0px 0px 3px 0px #d9d9d9;
 
 }
 #bottom{
 background-color:f2f2f2;
 border-top: 1px solid #e4e4e4;
 position:absolute;
 bottom: 0px;
 width: 100%;
 height: 35px;
 padding-top: 10px;
 font-size: 14px;
 
 
 }
 .under{
 color: #666;
 cursor:pointer;
 }
 .under:hover{
 text-decoration:underline;
 
 
 }
 
 </style>
 
 </head>
 <body>
 <div id="top" style="padding: 10px">
 <span class="top-left">Gmail</span>&nbsp;&nbsp;
 <span class="top-left">Images</span>
 <span id="option"></span>
 <span id="sign-in">Sign in</span>
 
 </div>
 <div id="center" style="padding: 10px">
 <img src="googlelogo_color_272x92dp.png" style="opacity:0.85;">
 <br><br>
 <input type="text">
 <br><br><br>
 <div>
 <span class="cent-btn">Google Search</span>&nbsp;
 <span class="cent-btn">I'm Feeling Lucky</span>
 </div>
 </div>
 <div id="bottom">
 <div style="display:inline;">
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="under">Advertising</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 <span class="under">Business</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 <span class="under">About</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 </div>
 <div style="display:inline;position:absolute;right:0">
 <span class="under">Privacy</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 <span class="under">Terms</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 <span class="under">Settings</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 </div>
 </div>
 </body>
</html>
امکانش هست راهنمایی کنین؟