Застрял на 'grid-template-columns' в CSS

В настоящее время я изучаю Django и застрял. Я создал 3 divs внутри контейнера home и написал этот CSS код для контейнера home ->

<style type="text/css">
    .home-container{
        display: grid;
        grid-template-columns: 1fr 3fr 1fr; 
    }
</style>

Я создал 'grid-template-columns: 1fr 3fr 1fr;', но я не получаю колонку для третьего div (т.е. 1fr). Содержимое третьего div находится ниже второго div.

Вот весь исходный код. ->

{% extends 'main.html' %}

{% block content %}


<style type="text/css">
    .home-container{
        display: grid;
        grid-template-columns: 1fr 3fr 1fr; 
    }
</style>


<div class="home-container">
    <div>
        <h3>Browse Topics</h3>
        <hr>
        <a href="{% url 'home' %}">All</a>

        {% for topic in topics %}
            <div>
                <a href="{% url 'home' %}?q={{topic.name}} ">{{topic.name}}</a>
            </div>
        {% endfor %}
    </div>

    <div>
        {% if room_count != 0 %}
            <h5>{{room_count}} rooms available.</h5>
        {% else %}
            <h5>No rooms available.</h5>
        {% endif %}
        
        <a href="{% url 'create-room' %}">Create Room</a>

        <div>
            {% for room in rooms %}
            <div>
                {% if request.user == room.host %}
                    <a href="{% url 'update-room' room.id %}">Edit this room</a>
                    <a href="{% url 'delete-room' room.id %}">Delete this room</a>
                {% endif %}
            </div>
            <div>
                <span>@{{room.host.username}}</span>
                <h5>{{room.id}} -- <a href="{% url 'room' room.id %}">{{room.name}}</a></h5>
                <small>{{room.topic.name}}</small>
                <hr>
            </div>
            {% endfor %}    
    </div>

    <div>
        <h3>Recent Activity</h3>
        <hr>
        <div>
            {% for message in messages %}

                <small>@{{ message.user }}   {{ message.created|timesince }} ago</small>

            {% endfor %}
        </div>
    </div>
</div>

{% endblock content %}

Пожалуйста, дайте мне решение.

<style type="text/css">
  .home-container {
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
  }
</style>


<div class="home-container">
  <div>
    <h3>Browse Topics</h3>
    <hr>
    <a href="{% url 'home' %}">All</a> {% for topic in topics %}
    <div>
      <a href="{% url 'home' %}?q={{topic.name}} ">{{topic.name}}</a>
    </div>
    {% endfor %}
  </div>

  <div>
    {% if room_count != 0 %}
    <h5>{{room_count}} rooms available.</h5>
    {% else %}
    <h5>No rooms available.</h5>
    {% endif %}

    <a href="{% url 'create-room' %}">Create Room</a>

    <div>
      {% for room in rooms %}
      <div>
        {% if request.user == room.host %}
        <a href="{% url 'update-room' room.id %}">Edit this room</a>
        <a href="{% url 'delete-room' room.id %}">Delete this room</a> {% endif %}
      </div>
      <div>
        <span>@{{room.host.username}}</span>
        <h5>{{room.id}} -- <a href="{% url 'room' room.id %}">{{room.name}}</a></h5>
        <small>{{room.topic.name}}</small>
        <hr>
      </div>
      {% endfor %}
    </div>
  </div>
  <div>
    <h3>Recent Activity</h3>
    <hr>
    <div>
      {% for message in messages %}

      <small>@{{ message.user }}   {{ message.created|timesince }} ago</small> {% endfor %}
    </div>
  </div>
</div>