我正在使用flask和Bootstrap。我正在尝试将自己的自定义CSS与一些Bootstrap类结合使用，尽管我可以将Bootstrap类应用于元素，但是当我尝试应用自己的自定义CSS时，它并不总是有效。例如，我将Bootstrap的text-center应用于div，它可以工作。然后，我尝试应用一些自定义CSS，或者什么也没有发生，或者仅应用了我的CSS的一部分。例如，color: red有效，但是font-size: 100px什么都不做。
这真让我发疯，我已经尝试了一切。我的CSS在Bootstrap CDN之后加载，并且我在flask中使用url_for访问CSS文件。我也尝试过使用!important，但这无济于事。我不知道还能尝试什么。
在我的基本模板中导入CSS内容：
<head>
{% block head %}
<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" href="{{ url_for('static',filename='style.css') }}"/>
{% endblock %}
</head>
在下一个代码段中，Bootstrap类均起作用。但是，当我尝试使用red类测试某些自定义CSS时，事情开始出错。我的自定义CSS的color: red属性有效，但字体大小更改无效。我也无法对图像进行任何自定义。
{% extends "base.html" %}
{% block content %}
<div class="header">
<header class="text-center">
<div>
<img src="{{ logo }}" class="img-fluid">
</div>
<div>
<p class="red">Text here.</p>
<p>More text.</p>
</div>
<div class="buttons">
<a href="{{url_for('about')}}" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>
</div>
</header>
</div>
{% endblock %}
一些自定义CSS
.red {
color: red;
font-size: 100px;
}