Как сделать шапку как на шаблоне?

Есть шаблон введите сюда описание изображения

На нем Company name в шапке стоит слева, а все остальные ссылки справа.

Как сделать так же как в шаблоне, потому что у меня получается так: введите сюда описание изображения

itProger - Company name. Я подключил статику вот так:

{% load static %}
    <link rel="stylesheet" type="text/css" href="{% static 'polls/main.css' %}" />

Сам css файл :

.header{
    justify-content: space-between;
    align-items: center;
}


.header__inner{
    display: flex;
    justify-content: space-between;
    align-items: center;

}



.header__inner a{
    margin: 0px 10px;
}

весь html:

{% load static %}
<!DOCTYPE html>
<html lang="en">

<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">
    <link rel="stylesheet" type="text/css" href="{% static 'polls/main.css' %}" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <title>{% block title %}{% endblock %}</title>


</head>

<body>
    <header class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-body border-bottom shadow-sm">
        <p class="h5 my-0 me-md-auto fw-normal">itProger</p>
        <nav class="my-2 my-md-0 me-md-3">
            <a class="p-2 text-dark" href="/">Главная</a>
            <a class="p-2 text-dark" href="about-us">Про нас</a>
        </nav>
    </header>
    {% block content %}{% endblock %}
</body>

</html>

Подскажите пожалуйста, в чем ошибка..


Ответы (1 шт):

Автор решения: Иван Конкин

Вот так:

header {
    display: flex;
    justify-content: space-between;
}

Этот введите сюда описание изображения

→ Ссылка