Legal Adviser

Почти точно так же, как и в этом примере , только border-top отрисовать.

Я бы попробовал бы сделать три прямоугольника внутри одного квадрата. А иконку саму свж абсолютом.

Стыдно наверное, но самое главное лень... ох... подрастающее поколение...

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

Всё зависит от того, как хочешь реализовать структуру основного блока.
Может не айс пример, но можешь посмотреть в консоли как у меня реализовано примерно то, что ты хочешь. Просто посмотри метки и категории и результат поиска.

Таблица либо грид либо флексами. Я бы делал flex, а зубы - svg одинакового размера :before
А списки (зелёного цвета) ссылками?

На планшете не удобно, но думаю, что как то так:

container {
  max-width: 1220px;
  width: 100%;
  padding: 0 10px;
  margin: 0 auto;
}

.title {
  font-family: 'Arial', sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 48px;
  line-height: 56px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #01353E;
}

.inschool {
  background-color: #336699;
}

.inschool__title {
  margin-bottom: 20px;
  text-align: center;
  background-color: #E69EFF;
}

.inschool__column {
  
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: #E69EF1;
  border: 2px solid red;
}

.column__item {
  display: inline-flex;
  flex-wrap: wrap;
  flex-direction: row;
  text-align: center;
  background-color: #4CBA00;
  border: 2px solid #00FFFA;
  padding: 0 5px;
  flex: 1 1 350px;
}

.column__title {
  display: flex;
  width: 100%;
  justify-content: space-between;
  font-size: 24px;
  line-height: 28px;
  text-transform: uppercase;
  border: 2px solid #000;
  background-color: #FFEE00;
  margin-bottom: 5px;
}

.column__text {
  font-size: 14px;
  line-height: 18px;
  letter-spacing;
  0.6px;
  text-align: left;
  padding: 0 5px;
  background-color: #E6EEF1;
  border: 2px solid #000;
  /*flex: 1 0 auto;*/


}

Семантика важная вещь. Тут где-то натыкался уже на этот вопрос, там один всё хорошо описал. Пошерстите этот сайт.

Ни тот, ни другой, ибо ваша семантика никому не упала))

+

Принципиально это не меняет ничего.

- А при таких обстоятельствах я бы не доверил делать сайт и тем более продвижение.

Господа, поскольку мало кто в теме про авторские права... поясню так:
Если заказчик просвещённый, то он вам даст свой договор, в котором будет указано что результат вашей работы принадлежит заказчику от и до. И если вы выложите без его ведома что-то куда-то, то вам мало не покажется. А пока с вами не заключили такого договора, можете выкладывать куда угодно и что угодно.