Trying to figure out how to eliminate those background containers. Here is my code. I tried removing all the containers and cards but it still didn't eliminate it. I've looked in my base.html and it does not have any cards or containers. all it has is the nav bar. I've tried using p-0 but that just shifted everything to the left.
{% extends "users/base.html" %}
{% block title %} Register as Customer {% endblock title %}
{% block content %}
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-md-8">
<h4 class="text-center">Create Customer Account</h4>
<form method="POST" enctype="multipart/form-data">
{% csrf_token %}
{% if form.errors %}
<div class="alert alert-danger alert-dismissible fade show" role="alert">
<div id="form_errors">
{% for key, value in form.errors.items %}
<strong>{{ value }}</strong>
{% endfor %}
</div>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
{% endif %}
<div class="form-row">
<div class="col-md-6">
<div class="form-group">
<label class="small mb-1"><i class="fas fa-user"></i> First Name</label>
{{ form.first_name }}
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="small mb-1"><i class="fas fa-user"></i> Last Name</label>
{{ form.last_name }}
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-6">
<div class="form-group">
<label class="small mb-1"><i class="fas fa-user"></i> Username</label>
{{ form.username }}
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="small mb-1"><i class="fas fa-envelope"></i> Email</label>
{{ form.email }}
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-6">
<div class="form-group">
<label class="small mb-1"><i class="fas fa-lock"></i> Password</label>
{{ form.password1 }}
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="small mb-1"><i class="fas fa-lock"></i> Confirm Password</label>
{{ form.password2 }}
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-6">
<div class="form-group">
<label class="small mb-1"><i class="fas fa-phone"></i> Phone Number</label>
{{ form.phone_number }}
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="small mb-1"><i class="fas fa-map-marker-alt"></i> Address</label>
{{ form.address }}
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-6">
<div class="form-group">
<label class="small mb-1"><i class="fas fa-city"></i> City</label>
{{ form.city }}
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="small mb-1"><i class="fas fa-flag"></i> State</label>
{{ form.state }}
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-6">
<div class="form-group">
<label class="small mb-1"><i class="fas fa-mail-bulk"></i> Zip</label>
{{ form.zip }}
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="small mb-1"><i class="fas fa-birthday-cake"></i> Birthday</label>
{{ form.birthday }}
</div>
</div>
</div>
<div class="form-group mt-4 mb-0">
<button type="submit" class="btn btn-primary col-md-12">Sign Up</button>
</div>
</form>
<div class="text-center mt-3">
<div class="small">
<a href="{% url 'login' %}">Have an account? Go to Sign in</a>
</div>
</div>
</div>
</div>
</div>
<script>
function formatBirthdayInput(event) {
const input = event.target;
let value = input.value.replace(/\D/g, ''); // Remove all non-digit characters
if (value.length > 2) {
value = value.slice(0, 2) + '/' + value.slice(2);
}
if (value.length > 5) {
value = value.slice(0, 5) + '/' + value.slice(5);
}
input.value = value;
}
</script>
{% endblock content %}
This is the base.html
{% load static %}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- CSS stylesheet-->
<link rel="stylesheet" href="{% static 'css/styles.css' %}">
<!-- Favicon -->
<link rel="icon" href="{% static 'favicon.ico' %}" type="image/x-icon">
<!-- Leaflet CSS -->
<link rel="stylesheet" href="/[email protected]/dist/leaflet.css" />
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="/[email protected]/dist/leaflet.js"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="/[email protected]/dist/css/bootstrap.min.css">
<!-- Font Awesome CSS -->
<link rel="stylesheet" href=".15.3/css/all.min.css">
<title>{% block title %}My Site{% endblock title %}</title>
</head>
<body>
<nav class="navbar navbar-horizontal">
<ul class="navbar-nav d-flex flex-row">
<li class="nav-item {% if request.path == '/' %}active{% endif %}">
<a class="nav-link" href="{% url 'home' %}">Home</a>
</li>
{% if user.is_authenticated %}
<li class="nav-item {% if request.path == '/logout_confirm/' %}active{% endif %}">
<a class="nav-link" href="{% url 'logout_confirm' %}">Logout</a>
</li>
<li class="nav-item {% if request.path == '/messages/' %}active{% endif %}">
<a class="nav-link" href="{% url 'messages' %}">Messages</a>
</li>
<li class="nav-item {% if request.path == '/profile/' %}active{% endif %}">
<a class="nav-link" href="{% url 'profile' %}">Profile</a>
</li>
{% if user.is_customer %}
<li class="nav-item {% if request.path == '/create_job/' %}active{% endif %}">
<a class="nav-link" href="{% url 'create_job' %}">Create Job</a>
</li>
{% endif %}
{% else %}
<li class="nav-item">
<a class="nav-link" href="{% url 'login' %}">Sign In</a>
</li>
<li class="nav-item {% if request.path == '/register/' %}active{% endif %}">
<a class="nav-link" href="{% url 'register_decision' %}">Sign up</a>
</li>
{% endif %}
</ul>
</nav>
<div class="container">
{% if messages %}
<div class="alert alert-dismissible fade show" role="alert">
{% for message in messages %}
<div class="alert alert-{{ message.tags }}">{{ message }}</div>
{% endfor %}
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
{% endif %}
{% block content %}{% endblock content %}
</div>
<!-- Add these elements to your HTML where appropriate -->
<div id="debug-info" style="display: none;">
<pre id="debug-content"></pre>
</div>
<script src=".6.0.min.js"></script>
<script src="/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="/[email protected]/dist/js/bootstrap.min.js"></script>
{% block scripts %}{% endblock scripts %}
</body>
</html>
Any help would be appreciated
Here is a picture to highlight what I'm talking about. the background shows 2 containers.