Всем привет, не могу решить такую проблему, у меня есть 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;
}
