Django中Room.html的Div列对齐异常问题求助

我在跟着教程开发Django项目时，遇到Room.html页面中Div列无法正确对齐的问题。教程作者的代码编辑器粘贴新<div>时自动缩进，导致代码结构异常，页面显示效果和预期不符。

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>

Home.html（视图文件） #

from django.http import HttpResponse
from django.shortcuts import render, redirect
from django.contrib import messages
from django.contrib.auth.decorators import login_required
from django.db.models import Q
from django.contrib.auth.models import User
from django.contrib.auth import authenticate, login, logout
from django.contrib.auth.forms import UserCreationForm
from .models import Room, Topic, Message
from .forms import RoomForm


# Create your views here.

#
# rooms = [
    #  {'id':1, 'name':'Lets learn Python!'},
    # {'id':2, 'name':'Design with me!'},
    # {'id':3, 'name':'Front End Devs!'},
#]




def loginPage(request):
    page = 'login'
    if request.user.is_authenticated:
        return redirect('home')


    if request.method == 'POST':
        password = request.POST.get('password').lower()
        username = request.POST.get('username')

        try:
            user = User.objects.get(username=username)
        except:
            messages.error(request, 'User does not exist')
            user = authenticate(request, username=username, password=password)
        if user is not None:
            login(request, user)
            return redirect('home')
        else:
            messages.error(request, 'Username OR Password not Valid')

    context = {'page': page}
    return render(request, 'base/login_register.html', context)


def logoutUser(request):
    logout(request)
    return redirect('home')

def registerPage(request):
    form = UserCreationForm()

    if request.method == 'POST':
        form = UserCreationForm(request.POST)

        if form.is_valid():
            user = form.save(commit=False)
            user.username = user.username.lower()
            user.save()
            login(request, user)
            return redirect('home')
        else:
            messages.error(request, 'An error occurred, try again.')
    return render(request, 'base/login_register.html', {'form': form})

def home(request):
    q = request.GET.get('q') if request.GET.get('q') != None else ''
    rooms = Room.objects.filter(
        Q(topic__name__icontains=q) |
        Q(name__icontains=q) |
        Q(Description__icontains=q)
    )

    topics = Topic.objects.all()
    room_count = rooms.count
    context = {'rooms': rooms, 'topics': topics, 'room_count': room_count}
    return render(request, 'base/home.html', context)

def room(request, pk):
    room = Room.objects.get(id=pk)
    room_messages = room.message_set.all().order_by('-created')
    participants = room.participants.all()

    if request.method == "POST":
        messages = Message.objects.create(
            user = request.user,
            room = room,
            body = request.POST.get('body')
        )
        room.participants.add(request.user)
        return redirect('room', pk=room.id)

    context = {'room': room, 'room_messages': room_messages, 'participants': participants}
    return render(request, 'base/room.html', context)

@login_required(login_url='login')
def createRoom(request):
    form = RoomForm()
    if request.method == 'POST':
        form = RoomForm(request.POST)
        if form.is_valid():
            form.save()
            return redirect('home')

    context = {'form': form}
    return render(request, 'base/room_form.html', context)

@login_required(login_url='login')
def updateRoom(request, pk):
    room = Room.objects.get(id=pk)
    form = RoomForm(instance=room)

    if request.user != room.host:
        return HttpResponse('You have no power here!')

    if request.method == 'POST':
        form = RoomForm(request.POST, instance=room)
        if form.is_valid():
            form.save()
            return redirect('home')

    context = {'form': form}
    return render(request, 'base/room_form.html', context)

@login_required(login_url='login')
def deleteRoom(request, pk):
    room = Room.objects.get(id=pk)

    if request.user != room.host:
        return HttpResponse('You have no power here!')

    if request.method == 'POST':
        room.delete()
        return redirect('home')
    return render(request, 'base/delete.html', {'obj': room})


@login_required(login_url='login')
def deleteMessage(request, pk):
    message = Message.objects.get(id=pk)

    if request.user != message.user:
        return HttpResponse('You have no power here!')

    if request.method == 'POST':
        message.delete()
        return redirect('home')
    return render(request, 'base/delete.html', {'obj': message})

Room_form.html 文件 #

{% extends 'main.html' %}

{% block content %}


<div>
    <form method="POST" action="">
        {% csrf_token %}
        {{form.as_p}}
        <input type="Submit" value="Submit">
    </form>
</div>

{% endblock content %}

内容的提问来源于stack exchange，提问作者user4963654