Неправильное выравнивание колонок Div в Django/Python

Я слежу за учебником и, к сожалению, его редактор кода автоматически делал отступы, когда он копировал/вставлял новый <div> (Вздох) (На второй картинке я случайно отрезал верх, где у него LOGO в правом верхнем углу на скриншоте)

Вот как это выглядит в настоящее время

Вот как это должно выглядеть

Файл Room.html

{% extends 'main.html' %}

{% block content%}


<div class="room-container">

<div>
    <style>
        .room-container(
        display: grid;
        grid-template-columns: 3fr 1fr;
            )
    </style>

        <div class="room-container">
            <div>

            <h1>{{room.name}}</h1>
            <p>{{room.description}}</p>

            <div class="comment-wrapper">
                <h3> Conversations </h3>
                <hr>

                {% for message in room_messages %}
                    <div>
                        <a href="{% url 'delete-message' message.id %}">Delete</a>
                        <small>@{{message.user}} {{message.created|timesince}} ago </small>
                        <p>{{message.body}}</p>
                        <hr>
                    </div>
                {% endfor %}
            </div>
            <div>

                {% if request.user.is_authenticated %}
                <div class="comment-for">
                    <form method="POST" action="">
                    {% csrf_token %}
                    <input type="text" name="body" placeholder="Comment here.." />
                    </form>
                </div>
            </div>
        </div>
        

                {% endif %}


        <div>
            <h3>Participants</h3>
            <hr>

            {% for user in participants %}
                <div>
                    <p>@{{user.username}}</p>
                </div>
            {% endfor %}
        </div>

</div>
{% endblock %}

Файл Main.html

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-9'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>StudyBud</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
</head>

<body>

    {% include 'navbar.html' %}
    
    {% if messages %}
    <ul class="messages">
        {% for message in messages %}
        <li></li>{{ message }}</li>
        {% endfor %}
    </ul>
    {% endif %}

    {% block content %}

    {% endblock content %}

</body>
</html>

Файл Navbar.html

<a href="/">
    <h1>LOGO</h1>
</a>


<form method="GET" action="{% url 'home' %}">
    <input type="text" name="q" placeholder="Search Rooms..." />
</form>

{% if request.user.is_authenticated %}
<p>Hello {{ request.user }}</p>
<a href="{% url 'logout' %}">Logout</a>
{% else %}
<a href="{% url 'login' %}">Login</a>
{% endif %}

<hr>

В вашем файле room.html много проблем. Во-первых, вы должны использовать фигурные скобки в определении стиля CSS. Далее, вы должны вставить ваш html в редактор кода и убедиться, что все теги div выстроены должным образом.

На данный момент, однако, это должно работать.

room.html

{% extends 'main.html' %}

{% block content%}

<!-- don't forget curly braces for css definitions-->
<style>
    .room-container {
        display: grid;
        grid-template-columns: 3fr 1fr;
    }
</style>

<div class="room-container">
    <div>
        <!-- this is 3fr region -->
        <h1>{{room.name}}</h1>
        <p>{{room.description}}</p>

        <div class="comment-wrapper">
                <h3> Conversations </h3>
                <hr>
    {% for message in room_messages %}
            <div>
                <a href="{% url 'delete-message' message.id %}">Delete</a>
                <small>@{{message.user}} {{message.created|timesince}} ago </small>
                <p>{{message.body}}</p>
                <hr>
            </div>
    {% endfor %}
        </div>
        <div>
    {% if request.user.is_authenticated %}
            <div class="comment-for">
                <form method="POST" action="">
                {% csrf_token %}
                <input type="text" name="body" placeholder="Comment here.." />
                </form>
            </div>
    {% endif %}
        </div>
    </div>
    <div>
        <!-- this is 1fr region -->
        <h3>Participants</h3>
        <hr>

    {% for user in participants %}
        <div>
            <p>@{{user.username}}</p>
        </div>
    {% endfor %}
    </div>
</div>
{% endblock %}
Вернуться на верх