Не удается корректно расширить мой базовый html-файл?

Я использую Django python с base.html, который я хочу расширить на мой login.html, но он не работает правильно. Моя панель навигации должна быть сверху, но она отображается неправильно, как вы можете видеть на этой картинке

Я пробовал много разных способов, но ничего не получилось. Полоса должна быть сверху, а не снизу

enter image description here

base.html


{% load static %}
<link rel="stylesheet" href="{% static 'nav.css' %}">
{% block content %}{% endblock content %}
<header>
    <div class="navbar">
    <ul>
         <li><a href="default.asp">Home</a></li>
         <li><a href="news.asp">About</a></li>
         <li><a href="contact.asp">Services</a></li>
         <li><a href="about.asp">Contact</a></li>

    </ul>

</div>
</header>

login.html

{% extends "main/base.html" %}
{% block content %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    {% load static %}
    <link rel="stylesheet" href="{% static 'style.css' %}">
</head>

<body>
<header>

</header>
  <div class="wrapper">
         <div class="title">
            Login Form
         </div>
         <form action="#">
            <div class="field">
               <input type="text" required>
               <label>Email Address</label>
            </div>
            <div class="field">
               <input type="password" required>
               <label>Password</label>
            </div>
            <div class="content">
               <div class="checkbox">
                  <input type="checkbox" id="remember-me">
                  <label for="remember-me">Remember me</label>
               </div>
               <div class="pass-link">
                  <a href="#">Forgot password?</a>
               </div>
            </div>
            <div class="field">
               <input type="submit" value="Login">
            </div>
            <div class="signup-link">
               Not a member? <a href="#">Signup now</a>
            </div>
         </form>
      </div>
</body>

</html>

{% endblock %}
Вернуться на верх