Why is my block of the links of my website off-line as wide as the images?

<!DOCTYPE html>
<html><head>
<!-- saved from url=(0022)http://internet.e-mail -->
<meta http-equiv="content-type" content="text/html; charset=UTF-8"><title>Eduard Lid</title>

<link rel="stylesheet" type="text/css" href="ex1.css">
<link rel="stylesheet" href="panning-slideshow.css">
<link rel="stylesheet" href="bsa.css" type="text/css" media="screen">
<script src="jquery-latest.js"></script>
<script src="jquery_002.js"></script>
<script src="jquery.js"></script>
<script src="image-rotator.js"></script>
<script src="bsa.js" async="" type="text/javascript"></script>
<script async="async" src="s_3a3793f622db4a9dea3bfa355c5b2441.js" id="_bsap_js_3a3793f622db4a9dea3bfa355c5b2441" type="text/javascript"></script>
<style id="bsa_css" type="text/css">.one{position:relative}.one .bsa_it_ad{display:block;padding:15px;border:1px solid #e1e1e1;background:#f9f9f9;font-family:helvetica,arial,sans-serif;line-height:100%;position:relative}.one .bsa_it_ad a{text-decoration:none}.one .bsa_it_ad a:hover{text-decoration:none}.one .bsa_it_ad .bsa_it_t{display:block;font-size:12px;font-weight:bold;color:#212121;line-height:125%;padding:0 0 5px 0}.one .bsa_it_ad .bsa_it_d{display:block;font-size:11px;color:#434343;font-size:12px;line-height:135%}.one .bsa_it_ad .bsa_it_i{float:left;margin:0 15px 10px 0}.one .bsa_it_p{display:block;text-align:right;position:absolute;bottom:10px;right:15px}.one .bsa_it_p a{font-size:10px;color:#666;text-decoration:none}.one .bsa_it_ad .bsa_it_p a:hover{font-style:italic}
.style1
{
color: #00FF00;
}
.style2
{
text-align: center;
}
.style3
{
color: #000000;
font-size: large;
}
.style4
{
color: #00FF00;
font-size: xx-large;
}
</style>
</head>



<body>

<div id="container">

<div class="style2"> <br class="style1">
<br class="style1">
<h1> <span class="style4" lang="en-gb">Eduard
Lid Web Design</span></h1>
<br class="style1">

<br>
</div>
<div id="window">
<ul style="top: -350px; left: -960px;" id="slideshow">
<li class="box1"><img src="tiger.jpg" alt="Tiger"></li>
<li class="box2"><img src="macaw.jpg" alt="Macaw"></li>
<li class="box3"><img src="bald-eagle.jpg" alt="Bald Eagle"></li>
<li class="box4"><img src="panda.jpg" alt="Panda"></li>
</ul>
</div>

<div id="bottom">


<ul class="links">
<li><a href="american.html">More</a></li>
<li><a href="spanish.html">Más</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
</ul>


<p id="copyright">Copyright © 2013</p>



<a href="http://ar.linkedin.com/in/eduardlid">

<img id="rot" src="http://www.linkedin.com/img/webpromo/btn_viewmy_120x33_es_ES.png?locale=" width="120" height="33" border="0" alt="Ver el perfil de Eduard Lid en LinkedIn"</image>*

</a>

</div>

</div>

</body>
</html>


* {
margin:0;
padding:0;
list-style-type:none;
}


body{
font: bold 15px arial,geneva,SunSans-Regular,sans-serif;
background-color:#000000;
}

#container {
width:1000px;
margin-left:auto;
margin-right:auto;
}

.linka
{
display:block;
font-weight:bold;
color:#FFFFFF;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
}
.links
{
background-color:#7A991A;
}


#copyright {
top:40px;
float:right;
font-size:10px;
color:#FFFFFF;
}

#rot {
margin-top:5%;
transform:rotate(-30deg);
-ms-transform:rotate(-30deg); /* IE 9 */
-moz-transform:rotate(-30deg); /* Firefox */
-webkit-transform:rotate(-30deg); /* Safari and Chrome */
-o-transform:rotate(-30deg); /* Opera */
}