我在一个 Django 网站上工作，所以我可以了解更多关于编码和 CSS、Html 和 Boostrap 的知识。我的主页有问题。在随附的屏幕截图中，您可以看到我卡片上的轮廓与页面顶部的彩色框不匹配。我画了两条粉红色的线来表达我的意思。有谁知道我该如何解决这个问题？
仪表板.html
{% extends 'accounts/main.html' %}
{% block content %}
{% include 'accounts/status.html' %}
<br>
<div class="row">
<div class="col-md-5">
<h5>KLANTEN</h5>
<hr>
<div class="card card-body">
<a class="btn btn-primary btn-sm btn-block" href="{% url 'create_customer' %}">
Nieuwe klant aanmaken</a>
<table class="table table-sm">
<tr>
<th></th>
<th>Customer</th>
<th>Phone</th>
</tr>
</table>
</div>
</div>
<div class="col-md-7">
<h5>LAASTE 5 RESERVERINGEN</h5>
<hr>
<div class="card card-body">
<table class="table table-sm">
<tr>
<th>Eigenaar</th>
<th>Diernaam</th>
<th>Brengen</th>
<th>Halen</th>
<th>Wijzigen</th>
<th>Verwijderen</th>
</tr>
{% for i in visits %}
<tr>
<td>{{i.customer}}</td>
<td>{{i.animals.name}}</td>
<td>{{i.date_brought}}</td>
<td>{{i.date_leave}}</td>
<td><a href="#" class="btn btn-primary btn-danger"><span class="glyphicon glyphicon-trash"></span> </a></td>
<td><a class="btn btn-outline-danger btn-sm btn-block" href="">Verwijderen</a></td>
</tr>
{% endfor %}
</table>
</div>
</div>
</div>
{% endblock %}
主.html
{% load static %}
<!DOCTYPE html>
<html>
<head>
<title>CRM</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="{% static '/css/main.css' %}">
</head>
<body>
{% include 'accounts/navbar.html' %}
<div class="container-fluid">
{% block content %}
{% endblock %}
<hr>
<h5>©Luuk Smedts Pre-alpha built 0.3</h5>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</html>
状态.html
<br>
<div class="row">
<div class="col">
<div class="col-md">
<div class="shadow p-3 mb-3 text-white rounded" id="total-orders" >
<div class="header">
<h5 class="card-title">Vandaag brengen</h5>
</div>
<div class="body">
<h3 class="card-title">{{vandaag_brengen}}</h3>
</div>
</div>
</div>
</div>
<div class="col">
<div class="col-md">
<div class="shadow p-3 mb-3 text-white rounded" id="orders-delivered">
<div class="header">
<h5 class="card-title">Vandaag halen</h5>
</div>
<div class="body">
<h3 class="card-title">{{vandaag_halen}}</h3>
</div>
</div>
</div>
</div>
<div class="col">
<div class="col-md">
<div class="shadow p-3 mb-3 text-white rounded" id="orders-pending">
<div class="header">
<h5 class="card-title">Huidige gasten</h5>
</div>
<div class="body">
<h3 class="card-title">{{vandaag_halen}}</h3>
</div>
</div>
</div>
</div>
</div>
main.css
#logo{
}
body{
background-color: #FCFCFC;
}
#total-orders{
background-color: #4cb4c7;
}
#orders-delivered{
background-color: #7abecc;
}
#orders-pending{
background-color: #7CD1C0;
}
@font-face {
font-family: 'Glyphicons Halflings';
src: url('../fonts/glyphicons-halflings-regular.eot');
src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}
我在这里先向您的帮助表示感谢！