カルーセルの中の画像が正しく表示されない

カルーセルの中の画像が正しく表示されないです。
http://black-flag.net/jquery/20120111-3643.html　を参考にして作っています。
htmlに

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="home.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
    　　　<div class="menu" id="menu">
             <h2 class="title first">SITE</h2> 
             <ul class="">  

                 <li><a class="home" href="">Home</a> </li>
                 <li><a class="profile" href="">Detail</a> </li>

             </ul>
         </div>

         <script src="carousel.js"></script>
         <div class="imgArea float-right" id="carousel">
            <ul>
                <li><a href="#"><img src="photo1.jpg" alt="" /></a></li>
                <li><a href="#"><img src="photo2.jpg" alt="" /></a></li>
            </ul>
         </div>
         <script src="carousel.js"></script>


</body>
</html>

と書きcssに

*{
    margin: 0;
    padding: 0;
}

.menu{
    background-color: gray;
    width: 500px;
    height: 100%;
    float: left;
}

.title{
    color:white;
    font-size:30px;
    margin: 0px 5px; 
    margin-left: 40px;
    text-align: center;
}

.first{
    padding-top:30px;
}

html, body, .menu {
    height: 100%;
}

body {
    margin: 0;
}

.relative {
    position: relative;
}

li{
    list-style: none;
}

li a{
    display: block;
    text-decoration: none;
    color: white;
    text-align: center;
    font-size: 20px;
}


li a img{
    width: 100%;
    height: 100%;
}

.float-right {
    width: calc(100% - 500px);
    overflow: hidden;
    float: right;
}

と書いたら、

の黄色で示した矢印の部分のように本来の画像より大分大きく（そもそも画像の原型もなく）カルーセルになってしまいます。

<div class="menu" id="menu">で囲んだ部分のブラウザの残りの部分の全部をカルーセルで敷き詰めたくて、そのカルーセル内で画像をぴったり表示するようにしたいです。なぜカルーセル内の画像が拡大され写ってしまっているのでしょうか？ ```ここに言語を入力 <a href="#"><img src="photo1.jpg" width="100px" height="100px"　alt="" /> ``` と書いても画像は拡大されたままでした。どう直せば良いのでしょうか？また、赤い矢印で示した部分のようにカルーセルとブラウザの上の部分に ```ここに言語を入力 *{ margin: 0; padding: 0; } body { margin: 0; } ``` と指定しているのに余白が空いているのがわかりません。どう直せば良いのでしょうか？