Login seems to be overflown from div

[EyadNour]

This is the header section which contains logo on the left side and login link on the right within the same div. I've been trying to get login text to not been overflown from the \[code\]#header_section\[/code\].What's wrong with my code? By the way, I just start learning CSS. \[code\]div#container{ background: url(../images/bg_inner.png) repeat; margin-left: auto; margin-right: auto; width: 950px; text-align: left;}div#header_section{ width: 930px; height: 65px; position: relative; margin: 5px;}#logo{ background: url(../images/logo.png) left no-repeat; margin: 5px; border: none; height: 55px; width: 200px;}.login{ font-size: 22px; color:#4A4A4A; width: 60px; float: right;}\[/code\]\[code\]<div id="header_section"> <a href="http://stackoverflow.com/questions/6947832/index.php" id="logo"></a> <a href="http://stackoverflow.com/questions/6947832/login.php" class="login">Login</a></div> \[/code\]