CSS3 Style problem - grid-template-columns using Django-CodePudding

(included website image) Essentially, on my website it displays the "Browse Topics" as well as the list of Topics indented as though it is 3fr(It is navigation so it should be on the left) while the "2 Rooms Available" and their contents are displayed beneath but as 1fr. . X.X

Home.html Code

{% extends 'main.html' %}

{% block content %}

<style>
    .home-container{
        display: grid;
        grid-template-columns: 1fr 3fr;
    }
</style>


<div >

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


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

    <div>
        <h5>{{room_count}} rooms available</h5>
        <a href="{% url 'create-room' %}">Create Room</a>

        <div>
           {% for room in rooms %}
           <div>
               <a href="{% url 'update-room' room.id %}">Edit</a>
               <a href="{% url 'delete-room' room.id %}">Delete</a>
               <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>
    {% endblock content %}

Website Image When I remove the browse topic column then the other column moves to the 3fr spot. SOmething commandeering the 1fr column

Main.html File

<!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 >
        {% for message in messages %}
        <li></li>{{ message }}</li>
        {% endfor %}
    </ul>
    {% endif %}

    {% block content %}

    {% endblock content %}
    
</body>
</html>

Navbar.html File

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


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

<a href="{% url 'login' %}">Login<a/>

<hr>

CodePudding user response：

To start with - these divs seem to have gotten out of synch. They are closing off your home container too early. Try removing the last .

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

If you just put the raw html you have provided into a .html file and test, that seems to behave as you'd expect, with topic in 1fr and rooms in 3fr. If browse topics is still in your 3fr region, you may need to check your main.html template to see if something else is interfering.

Edit after additional files provided

<a href="{% url 'login' %}">Login<a/>

See the closing <a/> tag in your navbar file? That is mucking up everything. Replace it with </a>