What can I do to make these movie templates always stay inside the green list container, like the videos in a youtube playlist always stays inside a container in the right side?

Using Django Templates & Frontend
1

My website currently:-

image
image1920×1080 216 KB

Youtube’s playlist I’m talking about:-

image
image697×985 193 KB

base.html:-

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block page_title %}{% endblock page_title %}</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
    {% block css_files %}{% endblock css_files %}
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>

<body>
    <nav class="navbar navbar-expand-lg bg-body-tertiary">
        <div class="container-fluid">
            <a class="navbar-brand" href="/">Watchlist</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
                aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <a class="nav-link" href="#">All Movies</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Bookmarks</a>
                    </li>
                </ul>
                <form class="d-flex" role="search">
                    <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                    <button class="btn btn-outline-success" type="submit">Search</button>
                </form>
            </div>
        </div>
    </nav>

    {% block content %}{% endblock content %}

</body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
    crossorigin="anonymous"></script>
{% block js_files %}{% endblock js_files %}
</html>

movie.html:-

{% load static %}

<div class="movie">
    <img src={{movie.cover_img.url}} alt="Movie Cover">
    <div class="movie-details">
        <h6 class="title">{{movie.title}}</h6>
        <button class="list-change-button" type="button"> > </button>
        <p class="release-year">Release Year: {{movie.release_year}}</p>
        <p class="duration">Duration: {{movie.duration_in_min}} min</p>
        <p class="imdb-rating">IMDb Rating: {{movie.imdb_rating}}</p>
        <p class="rotten-tomatoes-score">Tomatoes: {{movie.rotten_tomatoes_score}}%</p>
        <div class="tags">
            {% for tag in movie.tags.all %}
            <span class="tag">{{tag}}</span>
            {% endfor %}
        </div>
    </div>
</div>

index.html:-

{% extends 'movies/base.html' %}
{% load static %}

{% block page_title %}Watchlist{% endblock page_title %}

{% block css_files %}
<link rel="stylesheet" href={% static 'movies/style.css' %}>
{% endblock css_files %}

{% block content %}

<div id="main">

    <div class="container">
        <div id="search">
            <div>
                <div class="container-fluid mt-4 col-md-10">
                    <form class="d-flex" role="search">
                        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                        <button class="btn btn-outline-success" type="submit">Search</button>
                    </form>
                </div>
            </div>
        </div>
    </div>



    <div>
        <div class="mt-5" id="list-container">
            <div class="list-item" id="currently-watching"><h3>Currently Watching</h3>
                <div class="movie-container">
                    {% for movie in movies_currently_watching %}
                    {% include 'movies/includes/movie.html' %}
                    {% endfor %}
                </div>
            </div>
            <div class="list-item" id="on-hold"><h3>On Hold</h3>
                <div class="movie-container">
                    {% for movie in movies_on_hold %}
                    {% include 'movies/includes/movie.html' %}
                    {% endfor %}
                </div>
            </div>
            <div class="list-item" id="plan-to-watch"><h3>Plan to Watch</h3>
                <div class="movie-container">
                    {% for movie in movies_plan_to_watch %}
                    {% include 'movies/includes/movie.html' %}
                    {% endfor %}
                </div>
            </div>
            <div class="list-item" id="completed"><h3>Completed</h3>
                <div class="movie-container">
                    {% for movie in movies_completed %}
                    {% include 'movies/includes/movie.html' %}
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock content %}

views.py:-

from django.shortcuts import render
from django.http import HttpResponse, HttpResponseRedirect
from .models import Movie, Watchlist

# Create your views here.

def index(req):
    movies = Movie.objects.all()
    return render(req, "movies/index.html", {
        "movies_currently_watching": movies.filter(watchlist=Watchlist.objects.get(list_name="currently_watching")),
        "movies_on_hold": movies.filter(watchlist=Watchlist.objects.get(list_name="on_hold")),
        "movies_plan_to_watch": movies.filter(watchlist=Watchlist.objects.get(list_name="plan_to_watch")),
        "movies_completed": movies.filter(watchlist=Watchlist.objects.get(list_name="completed")),
    })
4

It’s best to put your question in the main part of your post - just a brief summary in the title.

This is really a front-end CSS question, rather than anything to do with Django.

Nevertheless: I can’t tell whether you’re showing us the part of the templates that includes the green box. If so, which part is it? We’d also need to see the relevant parts of style.css.