Как сделать, чтобы заголовки были на одном уровне друг под другом ? Я понимаю,что причина в том,что разный размер картинок.Но если я делаю одинаковый размер для них,то у картинки теряется качество. Как решить данную проблему ? Может быть картинку в одну строку надо ставить не таким образом, а как-нибудь иначе ?
.feature__title-second{
font-family: 'Roboto', sans-serif;
font-size: 16px;
color: #0f5f5c;
display: inline-block;
margin-left: 22px;
}
.feature__text-second{
font-family: 'Roboto', sans-serif;
font-size: 14px;
color: #83a7a5;
line-height: 22px;
width: 513px;
margin-top: 20px;
}
<div class="row">
<div class="col-lg-6">
<div class="feature__block-second">
<img src="img/icon4.png" alt="icon" class="feature__icon ">
<h3 class="feature__title-second">
Cross Browser Compatibility
</h3>
<p class="feature__text-second">
Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus.
</p>
</div>
</div>
<div class="col-lg-6">
<div class="feature__block-second">
<img src="img/icon5.png" alt="icon" class="feature__icon ">
<h3 class="feature__title-second">
Cross Browser Compatibility
</h3>
<p class="feature__text-second">
Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus.
</p>
</div>
</div>
<div class="col-lg-6">
<div class="feature__block-second">
<img src="img/icon6.png" alt="icon" class="feature__icon ">
<h3 class="feature__title-second">
Cross Browser Compatibility
</h3>
<p class="feature__text-second">
Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus.
</p>
</div>
</div>
<div class="col-lg-6">
<div class="feature__block-second">
<img src="img/icon7.png" alt="icon" class="feature__icon ">
<h3 class="feature__title-second">
Cross Browser Compatibility
</h3>
<p class="feature__text-second">
Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus.
</p>
</div>
</div>
</div>