Use Bootstrap margins directly

validata_ui/templates/home.html

 {% extends "base_template.html" %}
 
-{% block head %}
-{{ super() }}
-<style>
-  div.mb-5 h2.my-4, div.my-5 h2.my-4 {
-    margin-bottom: 0.2em !important;
-  }
-</style>
-{% endblock %}
-
 {% block title %}Accueil{% endblock %}
 
 {% block content %}
 <div class="container">
 {% for section in sections %}
 {% if section.catalog %}
-<div class="mb-5">
-  <h2 class="my-4">{{ section.title }}</h2>
+<div class="my-5">
+  <h2>{{ section.title }}</h2>
   {% if section.description %}
   <p class="text-muted">{{ section.description }}</p>
-  {% endif %}</h2>
+  {% endif %}
   <form action="{{ url_for('custom_validator') }}" method="GET">
     <div class="form-row">
       <div class="form-group col-lg-9">
@@ -40,7 +31,7 @@
 {% endfor %}
 
 <div class="my-5">
-  <h2 class="my-4">Schéma à la carte</h2>
+  <h2>Schéma à la carte</h2>
   <p class="text-muted">Indiquez ici l'URL du schéma que vous souhaitez pour valider un fichier.</p>
   <form action="{{ url_for('custom_validator') }}" data-cy="custom_schema_form" method="GET">
     <div class="form-row">
@@ -69,9 +60,9 @@
 {% for section in sections %}
 {% if section.links %}
 <div class="my-5">
-  <h2 class="my-4">{{ section.title }}</h2>
+  <h2>{{ section.title }}</h2>
   {% if section.description %}
-  <p class="text-muted">{{ section.description}}</p>
+  <p class="text-muted">{{ section.description }}</p>
   {% endif %}
   <div class="row my-4">
     {% for item in section.links %}