Ошибка в html или css коде, в чём проблема?

Question

Joe Brock @david_murasov

Изучаю front-end :)

HTML
CSS

Ошибка в html или css коде, в чём проблема?

В браузере отображается не корректно, а именно: информация из header'a под footer'ом, как и блоки из футера, кстати. В общем, разбросаны по всему пространству, и я не могу понять, из-за чего.

CSS-код:

@charset "utf-8";
    * {
        margin: 0;
        padding: 0;
        
}
body {
    width: 100%;
    height: 100%;
    color: #333;
    background: #f7f7f7;
    font-family: sans-serif;
    line-height: 135;
}

/* далее идут абзацы, благодаря которым ссылки будут менять цвет */

a {
    color: antiquewhite;
    text-decoration: none;
    transition: all.6s.ease;
    -moz-transition: all.6s.ease;
    -webkit-transition: all.6s.ease;
    -ms-transition: all.6s.ease;   
}
a:hover {
    color: darkgreen;
    text-decoration: none;
    transition: all.6s.ease;
    -moz-transition: all.6s.ease;
    -webkit-transition: all.6s.ease;
    -ms-transition: all.6s.ease;   
}
a:active {color: mediumaquamarine}

::selection {background: lightgreen; color: white}
::-moz-selection {background: lightgreen; color: white}

/* здесь абзацы про ссылки заканчивают свое существованиие */

img {
    max-width: 100%;
    height: auto;
}
.left {
    float: left;
}

.right {
    float: right;
}

header, footer {
    width: 100%;
    background-color: aqua;
    min-height: 50px;
    max-height: 50px;
    
}
header {
    border-bottom: 2px solid purple;
    padding: 1%;
    
}
#logo {
    font-size: 1.3em;
    font-family: fantasy;
    color: silver;
}
.contact {
    font-size: 1.5em;
    font-family: fantasy;
    margin-left: 20px;        
}
input [type="search"].field {
    border-radius: 2px;
    border: 2px solid silver;
    padding: 5px;
    margin-left: 20px;
    float: left;
}
input[type=text].field:focus {
    border: 2px solid #f7f7f7;
}
footer {
    padding: 1%;
    border-top: 2px solid blue;
    margin-top: 10px;
    padding-bottom: 2%;
}

HTML-код:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html"; charset="UTF-8" />
    <meta name="keywords" content="бла бла бла бла" />
    <meta name="description" content="бла бла бла бла бла бла бла бла бла бла бла бла бла бла бла бла бла бла" />
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    <link href="img/570cd1c779e8f1540a13734b.png" rel="shortcut icon" type="image/x-icon" />
	<title>Rock And Roll Music</title>
</head>
<body>
	<header> 
        <a href="index.html" title="Main Page" id="logo">Rock And Roll Music</a>
        <span id="contact">
            <a href="about.html" title="инфа о нас">О нас</a>
        </span><input type="search" class="field" placeholder="Давай помогу тебе найти" />
        <span class="right">
        <span class="contact">
            <a href="req.html" title="Зарегистрироваться">Регистрация</a> 
            </span>
        <span class="contact">
            <a href="auth.html" title="Войти">Вход</a>
            </span>
        </span>
    </header>
    
    
    <footer>
     <span class="left">Все права защищены. &copy; 2019</span> <span class="right"> Соц. кнопки <img src="" alt="Группа ВК" title="Группа ВК" /></span>
    
    </footer>
</body>
</html>