Проблема с пространством при вложении элементов гибкой сетки

Здравствуйте, у меня возникла проблема с расстоянием между двумя контейнерами. Я пытаюсь повторить этот макет (https://ibb.co/cy44QdV

). Используя эти рекомендации (https://dds.digitalservices.syr.edu/layout/flexbox

). Любые предложения помогут. Вот что у меня есть

 
{% load i18n wagtailcore_tags %}
{% load i18n static %}

<main class="main">

<div class='flex-container'>
 <div class='flex-grid'>
 <div class='flex-grid-item-7-md'>
 <div class='flex-row'>
 <div class='flex-grid-item-7-md '>
 <div class='flex-grid-item'>
 <h3 class='heading-display-h2'>Quick Links</h3>
 <div class='flex-container padding-top-3 padding-bottom-3'>
 <div class='flex-grid'>
 <ul id="sul-policies" class="flex-md flex-justify-center">
 <li class="padding-x-2"> <a href="#"><img src="{% static "img/1.JPG" %}" alt="Справочник сотрудников"></li></a>
 <li class="padding-x-2"> <a href="#"><img src="{% static "img/2.JPG" %}" alt="Бронирование"></li></a>
 <li class="padding-x-2"> <a href="#"><img src="{% static "img/3.JPG" %}" alt="СК"></li></a>
 <li class="padding-x-2"> <a href="4"><img src="{% static "img/4.JPG" %}" alt="Путеводители"></li></a>
 </ul>
 </div>
 </div>
 </div>
 </div>
 <div class='flex-grid-item-5-md '>
 <div class='flex-grid-item'>
 <div class='padding-2 margin-2'>
 <h2 class='heading-display-h2'>Databases</h3>
 <div class='flex-container padding-top-3 padding-bottom-3'>
 <div class='flex-grid'>
 <div class='flex-grid-item'>
 <div class=' padding-2'>
 <div class='display-md-inline-block display-sm-block margin heading-display-h3'><b>Starting Policies</b></div><br>
 Ebsco<br>
 JSTOR<br>
 Proques<br>
 Scopus<br>
 </div>
 </div>
 <div class='flex-grid-item'>
 <div class=' padding-2'>
 <div class='display-md-inline-block display-sm-block margin heading-display-h3'><b>Frequently Used</b></div><br>
 IBISWorld<br>
 Kanopy<br>
 PsycINFO<br>
 New York Times<br>
 WorldCat<br>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 <div class='flex-grid'>
 <!--Flex Box 2-->
 <div class='flex-grid-item'>
 <div class='padding-2 margin-2'>
 <h2 class='heading-display-h2'>Explore Collections</h3>

 <div class='flex-container padding-top-3'>
 <div class='flex-grid'>
 <div class='flex-grid'>
 <ul id="sul-policies" class="flex-md sul-ul-wrap">
 <li class="padding-x-2 sul-img-size"> <a href="#"><img src="{% static "img/5.JPG" %}" alt="часы" style="min-width: 200px;"></li></a>
 <li class="padding-x-2 sul-img-size"> <a href="#"><img src="{% static "img/6.JPG" %}" alt="Бронирование" style="min-width: 200px;"></li></a>
 <li class="padding-x-2 sul-img-size"> <a href="#"><img src="{% static "img/7.JPG" %}" alt="СК" style="min-width: 200px;"></li></a>
 <li class="padding-x-2 sul-img-size"> <a href="8"><img src="{% static "img/8.JPG" %}" alt="Путеводители" style="min-width: 200px;"></li></a>
 </ul>
 </div>

 </div>
 </div></div>
 </div>
 </div>
 </div>
</div> </main>

Код (разметка):

Ну... первое, что я бы посоветовал, это перестать навязывать презентационные классы всему, особенно тегам, которые вообще не должны иметь классов.

Аналогично, перестаньте добавлять в разметку статический стиль.

Если вам нужна таблица стилей, ИСПОЛЬЗУЙТЕ ЕГО. ТОГДА перестаньте добавлять на свою страницу бесконечные бессмысленные DIV с невозможным форматированием.

Также не помешало бы, если бы вы потрудились использовать что-то отдаленно напоминающее правильную семантику вместо супа тегов.

Вот почему у вас получилось примерно на 20% больше кода, чем вам нужно, и при этом за кодом сложно следить. Также похоже, что вы пытаетесь использовать изображения для некоторых разделов, которые должны быть текстом и изображениями.

Помните, что контент, содержащий только изображения, даже с заголовком или alt, является недоступным мусором для многих пользователей.

Если это текст, ИСПОЛЬЗУЙТЕ ТЕКСТ. Все это говорит о том, что вы, вероятно, ищете «пробел». Но давайте сначала очистим разметку, чтобы она имела смысл.

Я буду использовать шрифт Awesome для оранжевых кнопок, так как ясно, что именно такой шрифт использовался в оригинале.

 <div class="moreInfo">

<div class="sectionGroup">

<section id="quickLinks">
<h2>Quick Links</h2>
<ul>
<li>
<a href="#">
<i class="fas fa-users"></i>
Staff Directory
</a>
</li><li>
<a href="#">
<i class="far fa-calendar-alt"></i>
Reserve A Room
</a>
</li><li>
<a href="#">
<i class="fas fa-archive"></i>
Special Collections
</a>
</li><li>
<a href="#">
<i class="fas fa-book-open"></i>
Research Guides
</a>
</li>
</ul>
<!-- #quickLinks --></section>

<section id="databases">
<h2>Databases</h2>
<div>
<h3>Starting Points</h3>
<ul>
<li>Ebsco</li>
<li>jSTOR</li>
<li>Proquest</li>
<li>Scopus</li>
<li>Web of Science</li>
</ul>
</div><div>
<h3>Frequently Used</h3>
<ul>
<li>IBISWorld</li>
<li>Kanopy</li>
<li>PsychINFO</li>
<li>New York Times</li>
<li>WorldCat</li>
</ul>
</div>
<span><a href="#" class="readMore">View All Databases</a></span>
<!-- #databases --></section>

<!-- .sectionGroup --></div>

<section id="exploreCollections">
<h2>Explore Our Collections</h2>
<a href="#">
<h3>
<span>Special Collections</span>
The Syracuse Hours
</h3>
<img
alt="Архивы Здания"
src="images/archives-buildings.jpg"
>
</a>
<a href="#">
<h3>
<span>Digital Collections</span>
Belfer Cylinders Digital Connections
</h3>
<img
alt="несколько случайных цилиндров Белфера"
src="images/belfer-cylinders.jpg"
>
</a>
<a href="#">
<h3>
<span>University Archives</span>
Buildings of SU
</h3>
<img
alt="Сиракузы Часы работы"
src="images/syracuse-hours.jpg"
>
</a>
<a href="#">
<h3>
<span>Databases</span>
JSTOR
</h3>
<img
alt="Логотип JSTOR"
src="images/jstor-logo.png"
>
</a>
<!-- #exploreCollections --></section>

<!-- .moreInfo --></div>

Код (разметка): Обратите внимание, что я не навязываю презентационные классы всему подряд.

ПОМНИТЕ, презентационные классы так же тупы и сломаны, как презентационная разметка в стиле 1990-х годов.

Ваши классы должны по возможности описывать, что ЕСТЬ, а не то, как вы хотите, чтобы они выглядели.

В противном случае вы полностью утратите смысл HTML и того, почему CSS отделен от него! Посмотрите мою статью на эту тему:
https://medium.com/codex/why-presentational-classes-for-html-css-are-ignorant-garbage-bcfdb02ec397

Давайте рассмотрим это.

Вам не нужно открывать 6 DIV, прежде чем вы дойдете до первого заголовка.

Внешний DIV охватывает всю область и класс (если таковой имеется), описывающий, что такое раздел.

Аналогичным образом, внутренний DIV для первого столбца должен быть сформулирован аналогичным образом, указывая, что такое содержимое, а НЕ то, как вы хотите, чтобы оно выглядело! Разделу #quickLinks я присваиваю значимый идентификатор для стилизации.

Это не просто ясно говорит, что это такое, это еще и крючок, на который мы можем при желании ссылаться внутренне, и/или перехватывать его через скрипты, если это необходимо.

Я очень сомневаюсь, что ЛЮБАЯ страница будет иметь H2, чтобы этот H3 был подразделом, поэтому, вероятно, правильный заголовок глубины — H2. Это разделы, поэтому мы отметим их как таковые, хотя я не в восторге от этого тега.

Это список ссылок, поэтому отметьте его как таковой, добавив в него ТЕКСТ, чтобы невизуальные пользователи не остались в стороне от изображений и возможной неправильной обработки ALT.

при условии, что кто-то вообще его предоставит.

Также ясно, что это были значки с потрясающим шрифтом, поэтому примените их вместо изображений в этом разделе. #база данных аналогична.

Это РОДНИК быстрых ссылок, поэтому он имеет тот же заголовок глубины.

Почему у вас был H3, за которым следовал H2 для того, что совершенно очевидно является структурным братом и сестрой? Я понятия не имею.

Он явно разбит на два подраздела, и каждый из подразделов H2 начинается с H3, поскольку именно это и ОЗНАЧАЕТ тег; начало предшествующего ему подраздела H2. Если вы думаете, что H1..H6 означает шрифты разного веса и размера, значит, вы набиты навозом!. Содержимое, очевидно, представляет собой списки, поэтому размечайте их как списки, а не просто как набор разделенных

строк.

Закрывая группу разделов, мы переходим к родственному разделу, который снова начинается на глубине h2. Стилизация этих областей изображения требует нескольких дополнительных контейнеров и является немного хрупкой, независимо от того, как вы ее кодируете.

Во-первых, это одна из причин, почему я НЕ фанат делать подобные вещи в макете! Несмотря на это, мы используем якоря в качестве внешнего контейнера, чтобы их можно было связать.

Чтобы обеспечить посадочные конструкции, мы можем использовать H3. Обратите внимание, что раньше было недопустимо размещать теги уровня блока, такие как H3, внутри якорей, это ограничение было снято в HTML 5. Ни один браузер НИКОГДА не заботился об этом! Отсюда мы помещаем изображение и позволяем гибкому интерфейсу творить чудеса. В двух словах, это то, какой, вероятно, должна была быть ваша разметка. Теперь, чтобы стилизовать... Ну, вот работающая демонстрация:
https://cutcodedown.com/for_others/soupi/flexDemo/

Я собираюсь спать, но завтра постараюсь запомнить это и задокументировать CSS, чтобы вы могли понять, как/что/почему. И да, я знаю, что ваши бесконечные бессмысленные презентационные занятия, скорее всего, взяты из какой-то дерьмовой структуры.

Вот почему я не люблю фреймворки. Смех в том, что благодаря небольшому знанию новых свойств CSS, таких как min и max, а также естественному поведению flex-wrap и min-width, я сделал его в основном отзывчивым без каких-либо медиа-запросов.

Это что-то новое, с чем я играл.

Нет, потому что CSS, на который он опирается, — это дерьмо.

Код, представленный по этой ссылке, — это дерьмо. Если это ради работы, увольняйтесь.

Если вы пытаетесь учиться на их примерах, не делайте этого.

Если это курсовая работа, подайте в суд, чтобы вернуть вам плату за обучение.

Этим придуркам НЕТ никакого дела, чтобы рассказывать кому-либо, как использовать HTML или CSS.

Если это действительно для них, я бы посоветовал им уйти.

К сожалению, эти «рекомендации» выглядят как худшая чушь.

Это означает, что это невежественный неумелый мусор, и если это для образовательного учреждения, они рискуют получить иск, используя это дерьмовое дерьмо о презентационном классовом идиотизме.

Вот почему весь их сайт — это дерьмо о доступности; трагикомедия, когда у них есть раздел «доступность», несмотря на то, что они явно не знают достаточно о HTML или CSS, чтобы трепаться по этой теме.

Любой, кто советует вам использовать подобную фигню, не имеет права рассказывать вам, как создать страницу на веб-сайте.