Два раз проверил код, два элемента сдвинуты вверх. в чем проблема?

HTML
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Портал КиноМонстр</title>
    <meta name="description" content="КиноМонстр — это портал о кино">
    <meta name="keywords" content="фильмы, фильмы онлайн, hd" />
    <link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
    <div class="main">
        <div class="header">
            <div class="logo">
                <div class="logo_text">
                    <h1><a href="/">КиноМонстр</a></h1>
                    <h2>Кино — наша страсть!</h2>
                </div>
            </div>
            <div class="menubar">
                <ul class="menu">
                    <li class="selected"><a href="#">Главная</a></li>
                    <li><a href="#">Фильмы</li>
                    <li><a href="#">Сериалы</li>
                    <li><a href="#">Рейтинг фильмов</li>
                    <li><a href="#">Контакты</li>
                </ul>
            </div>
        </div>
    </div> 
</body>
</html> 

CSS
* {
    margin: 0;
    padding: 0;
}
.header {
    background-color: darkslateblue;
    height: 177px;
    font-size: 0.8em;
    margin-left: 0px;
    margin-right: 0px;
    min-width: 900px;
}

.main, .logo, .menubar, .site_content, .footer {
    margin-left: auto;
    margin-right: auto;
}

.logo {
    width: 880px;
    padding-bottom: 40px;
}

.logo h1, .logo h2 {
    font: normal 300% "century gothic", arial, sans-serif;
    margin: 0 0 0 9px;
}

.logo_text h1, .logo_text h1 a, .logo_text h1 a:hover {
   padding: 22px 0 0 0;
   color: #fff;
   letter-spacing: 0.1em;
   text-decoration: none; 
}

.logo_text h2 {
    font-size: 0.9em;
    padding: 4px 0 0 0;
    color: #999;
}
.menubar {
    width: 900px;
    height: 46px;
}
    
 ul.menu {
     float: right;
 }
 ul.menu li {
     float: left;
     padding: 0 0 0 9px;
     list-style: none;
     margin: 1px 2px 0 0;
}
ul.menu li a {
    font: normal 100% "trebuchet ms", sans-serif;
    display: block;
    height: 20px;
    padding: 6px 35px 5px 28px;
    color: #fff;
    text-decoration: none;

}
ul.menu li.selected a {
    color: #aeb002;
}
ul.menu li a:hover {
    color: #e4ec04;
}

html

css

2 ответов

Спасибо за помощь

Тут ошибка. Незакрыты теги </a>:

<li><a href="#">Фильмы</li>
<li><a href="#">Сериалы</li>
<li><a href="#">Рейтинг фильмов</li>
<li><a href="#">Контакты</li>

Так должно быть:

<li><a href="#">Фильмы</a></li>
<li><a href="#">Сериалы</a></li>
<li><a href="#">Рейтинг фильмов</a></li>
<li><a href="#">Контакты</a></li>