locating and editing the right CSS files for template and creating space in between line items

I am working with an existing code base, new dev here. I want to create spacing between the line items. I am unsure as to whether I am editing in the correct CSS file. I posted this here because this still relates to Django, as I am trying to figure out the file system. I may also want to create a border around some of the elements in this card. Please provide me with some information and resources.

register.html:

{% extends "user/base-login.html" %}
{% load crispy_forms_tags static %}

{% block title %}Registration{% endblock %}
{% block pagetitle %}Registration{% endblock %}
{% block css %}
    {{ block.super }}
    <link rel="stylesheet" href="{% static 'css/legislation-plan.css' %}">
{% endblock %}
{% block breadcrumb %}
    <li class="breadcrumb-item" aria-current="page"><a href="{% url 'login' %}">Login Page</a></li>
{% endblock %}

{% block content %}
    <form method="post" action="{% url 'register' %}" enctype="multipart/form-data">
        {{ form.media }}
        {% csrf_token %}
        <div class="row register-page">
            <div class="col-md-6 col-sm-12 plan-page">
                <div class="card box text-center card-body item-wrapper bg-transparent text-blue">
                    <h5 class="card-title text-blue">Your Selected Plan</h5>
                    <h5 class="card-title text-blue">14-day Trial version<br> <small>Free access to 1 standard</small></h5>
                    <div class="text-left item m-0">
                        <ul class="fa-ul">
                             
                            <li><span class="fa-li"><i class="fas fa-check"></i></span>ISO standards explained</li>

                            <li><span class="fa-li"><i class="fas fa-check"></i></span>Identify your company ISO gaps</li>
                            
                            <li><span class="fa-li"><i class="fas fa-check"></i></span>Non conformance register <br><small>(create, track and manage issues)</small></li>

                            <li><span class="fa-li"><i class="fas fa-check"></i></span>Build your own Management System </li>

                            <li><span class="fa-li"><i class="fas fa-check"></i></span>Templates<small>(Preview)</small></li>

                            <li><span class="fa-li"><i class="fas fa-check"></i></span>Reports</li>
                        
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-sm-12">
                <div class="card box">
                    <h5 class="card-title">Start a 14-day free trial, add your details below!</h5>
                    <div class="row">
                        <div class="col-md-12 col-sm-12">
                            <div class="form-group">
                                <label>{{ form.email.label }}</label>
                                <div class="input-group-append">
                                    {% for error in form.email.errors %}
                                        <div class="alert alert-danger"><strong>{{ error|escape }}</strong></div>
                                    {% endfor %}
                                    {{ form.email }}
                                    <div class="input-group-text"><i class="fas fa-envelope"></i></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12 col-sm-12">
                            <div class="form-group">
                                <label>{{ form.country.label }}</label>
                                {% for error in form.country.errors %}
                                    <div class="alert alert-danger"><strong>{{ error|escape }}</strong></div>
                                {% endfor %}
                                {{ form.country }}
                            </div>
                        </div>
                        <div class="col-md-12 col-sm-12">
                            <div class="form-group">
                                <label>{{ form.first_name.label }}</label>
                                {% for error in form.first_name.errors %}
                                    <div class="alert alert-danger"><strong>{{ error|escape }}</strong></div>
                                {% endfor %}
                                {{ form.first_name }}
                            </div>
                        </div>
                        <div class="col-md-12 col-sm-12">
                            <div class="form-group">
                                <label>{{ form.last_name.label }}</label>
                                {% for error in form.last_name.errors %}
                                    <div class="alert alert-danger"><strong>{{ error|escape }}</strong></div>
                                {% endfor %}
                                {{ form.last_name }}
                            </div>
                        </div>
                        <div class="col-md-12 col-sm-12">
                            <div class="form-group password-group">
                                <label>{{ form.password1.label }}</label>
                                <div class="input-group-append">
                                    {% for error in form.password1.errors %}
                                        <div class="alert alert-danger"><strong>{{ error|escape }}</strong></div>
                                    {% endfor %}
                                    {{ form.password1 }}
                                    <div class="input-group-text show">
                                        <i class="fas fa-eye" title="Show password"></i>
                                        <i class="fas fa-eye-slash" title="Hide password"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12 col-sm-12">
                            <div class="form-group password-group">
                                <label>{{ form.password2.label }}</label>
                                <div class="input-group-append">
                                    {% for error in form.password2.errors %}
                                        <div class="alert alert-danger"><strong>{{ error|escape }}</strong></div>
                                    {% endfor %}
                                    {{ form.password2 }}
                                    <div class="input-group-text show">
                                        <i class="fas fa-eye" title="Show password"></i>
                                        <i class="fas fa-eye-slash" title="Hide password"></i>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-12 col-sm-12">
                            <div class="form-check mt-3">
                                {{ form.terms }}
                                <label class="form-check-label" for="id_{{ form.terms.name }}">
                                    By signing up you agree to our <a class="link-primary" target="_blank"
                                                                      href="/terms">Terms & Conditions and Privacy
                                    Policy</a>.
                                </label>
                            </div>
                        </div>

                        <div class="col-md-12 col-sm-12">
                            <div class="form-group">
                                {{ form.captcha }}
                                {% for error in form.captcha.errors %}
                                    <div class="alert alert-danger"><strong>{{ error|escape }}</strong></div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-12 col-sm-12">
                <div class="card box">
                    <div class="action-btns">
                        <a href="{% url 'login' %}" class="btn btn-blank btn-lg"><i class="fas fa-times mr-3"></i>
                            Cancel</a>
                        <button type="submit" class="btn btn-primary btn-lg"><i class="fas fa-check mr-3"></i></i>
                            Register
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </form>
{% endblock content %}


legislation-plan.css

.nav-large {
	font-size: 20px;
	font-weight: bold;
}
.tab-content {
	padding-bottom: 20px;
	background-color: white;
}


Thanks in advance!

What you want to do is use your browser’s developer tools to figure out exactly which files and selectors are responsible for formatting the elements you want to change. The interactions between files, elements, and selectors isn’t always obvious.

Hello Ken, thank you for your response. I had a hunch that the key was to explore the developer tools. I will find a tutorial on how to use the developer tools to figure out what to do. In regards to the css file I pointed to, I’m guessing that wasn’t the right one?

We out here can have no idea. That’s why you need to use the developer tools. Without knowing every css file being loaded, and it what order they’re being loaded, there’s no way for us to tell.

You could just try making some changes to see if they’ll “take”, but as things get more complex, you’ll want to learn how to identify what settings are being applied - and from where.

Okay got it Ken thank you for your time and help