Как правильно сверстать блоки?

Question

[Алексей]

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

<div class="green">
<h2>SMART HELPER – уникальное программное обеспечение, значительно упрощающее работу логиста.</h2>
<br>

<div class="row">
    
        <div class="col-md-3">
        <h3 style="color: #FFFFFF; font-weight: bold"> Калькулятор </h3><br><br>

        <font style="font-family: Arial; font-size: 14pt;">Не страшно, если некоторые тонкости вам неизвестны</font>
    </div>
    
         <div class="col-md-6">
        <h3 style="color: #FFFFFF; font-weight: bold;">Транспортировка</h3><br><br>

        <font style="font-family: Arial; font-size: 14pt;">Подберём транспорт, упаковку и разложим по полочкам в лучшем виде.</font>
</div>
    
     <div class="col-md-3">
       <h3 style="color: #FFFFFF; font-weight: bold">Упаковка</h3><br><br>

        <font style="font-family: Arial; font-size: 14pt;">Проложим маршрут. Мультимодальный включительно.</font>
    </div>

</div>
<br>
<br>
<br>

<div class="row">
    <div class="col-md-12">
        <p style="font-size: 18pt; font-weight: bold; font-family: Arial Black">Доверьте работу нейронным сетям и генетическим алгоритмам</p>
    </div>
</div>

</div>

.green{
  background: #004e11;
  color: white;
  text-align: center;
  height:100%;
}
.green h2{
  padding-top: 10px;
  font-size: 20px;
  color: #fff;
}
.green h3, font{
 background: #222222;
 display: inline-block;
width: 90%;

}
.green p{
  padding-bottom:15px;
  font-size: 20px;
}

Comments

[Andrei1penguin1]

Так ты сам паддинги задаешь, поэтому и зазор

Answer 1

[Danny Arty]

Я бы предложил сделать через flex

Comments

[Алексей]

И что от этого изменится?

[Danny Arty]

Алексей, изменил на вариант через flex