CSS3/HTML Divs где-то не совпадают

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

Вот как выглядит мой сайт

Вот как я хотел бы, чтобы это выглядело

{% 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 %}

Вернуться на верх