Python Django - 模板在浏览器

Question

以下是我页面中实际的部分代码。它直接从html调用时显示正常。使用模板时它不起作用。整个页面的对齐方式正在改变。

以下是实际的html代码（仍然很小）：

   <div class="panel-group accordion" id="accordion">
         <div class="panel panel-default">
                            <div class="panel-heading">
                                <h4 class="panel-title">
                                    <a data-toggle="collapse" data-parent="#accordion" href="#collapse06">
                                        <i class="switch fa fa-plus"></i>
                                        Office Help Desk
                                    </a>
                                </h4>
                            </div>
                     </div>   
            </div>

当我尝试使用模板时，整个对齐方式正在改变。以下是我用来调用模板的html文件（试图给模板提供'Office Help Desk'）：

{% extends 'career_page/layout_new.html' %}
{% load crispy_forms_tags %}
{% block content %}
     Office Help Desk           
{% endblock %}

我将块内容标记添加到主html文件中，如下所示：

<div class="panel-group accordion" id="accordion">
     <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                                <a data-toggle="collapse" data-parent="#accordion" href="#collapse06">
                                    <i class="switch fa fa-plus"></i>
                                    {% block content %}{% endblock %}
                                </a>
                            </h4>
                        </div>
                 </div>   
        </div>

整个对齐方式正在改变，同时尝试打开实际的html文件，其工作正常。可能是什么问题。请帮我解决一下这个。我是Django的新手。

实际的html页面

使用模板后