Weird space between navbar pictures and picture

I can't figure out why there is a space between the navigation pictures in the top right corner and the big photo. I have tried putting margin and padding to 0 on all relevant elements but it still appears. I even checked to see if I accidently put an invisible border on the pictures themself but nope. I just started coding html and css so I don't know very much. it's very tiny but still annoying. Thanks for any help!

*{
padding:0;
margin:0;
}
body{
background-color:#242628;
}
.logo{
margin:0;
padding:0;
}
.logo img{
float:left;
margin-top:0.6%;
margin-left:1%;
margin-bottom:0;
width:280px;
height:75px;
}
.head{
padding:0;
margin:0;
}
.head ul{
float:right;
list-style-type:none;
padding:0;
margin:0;
}
.head ul img{
width:100px;
height:100px;
padding:0;
margin:0;
}
.head li{
float:left;
margin:0;
padding:0
}
.head ul a{
padding:0;
margin:0;
display:block;
}
.bakbild img{
padding:0;
margin:0
}

<!DOCTYPE html>
<html>
<head>

    <meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/gwfcss.css">
</head>

<body>
<div class="head">
    <div class="logo">
        <img src="bilder/logocube.png">
    </div>

    <ul>
        <li><a><img src="bilder/home.jpg"></a></li>     
        <li><a><img src="bilder/game.jpg"></a></li> 
        <li><a><img src="bilder/profil.jpg"></a></li>
    </ul>
</div>
<div class="bakbild">
    <img src="bilder/gamingsetup.jpg" style="width:100%;">
</div>
</body>
</html>

Solution

Images are aligned to baseline by default and are treated similarly to inline elements, so there is a little space at the bottom for the trailing characters in inline content. To remove it, use a different vertical-align value. Added vertical-align: top to those imgs.

*{
padding:0;
margin:0;
}
body{
background-color:#242628;
}
.logo{
margin:0;
padding:0;
}
.logo img{
float:left;
margin-top:0.6%;
margin-left:1%;
margin-bottom:0;
width:280px;
height:75px;
}
.head{
padding:0;
margin:0;
}
.head ul{
float:right;
list-style-type:none;
padding:0;
margin:0;
}
.head ul img{
width:100px;
height:100px;
padding:0;
margin:0;
vertical-align: top;
}
.head li{
float:left;
margin:0;
padding:0
}
.head ul a{
padding:0;
margin:0;
display:block;
}
.bakbild img{
padding:0;
margin:0
}

<!DOCTYPE html>
<html>
<head>

    <meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/gwfcss.css">
</head>

<body>
<div class="head">
    <div class="logo">
        <img src="http://kenwheeler.github.io/slick/img/lazyfonz3.png">
    </div>

    <ul>
        <li><a><img src="http://kenwheeler.github.io/slick/img/lazyfonz3.png"></a></li>     
        <li><a><img src="http://kenwheeler.github.io/slick/img/lazyfonz3.png"></a></li> 
        <li><a><img src="http://kenwheeler.github.io/slick/img/lazyfonz3.png"></a></li>
    </ul>
</div>
<div class="bakbild">
    <img src="http://kenwheeler.github.io/slick/img/lazyfonz3.png" style="width:100%;">
</div>
</body>
</html>