Как сделать чтобы кнопка "Полный список цен", не расстигивалась на всю ширину?
<section id="block-two" class="default-section js-section">
<h2 class="name-section">Основной список <span class="bold">услуг</span> предоставляемых нами</h2>
<div class="shop-wrapper">
<div class="shop-item">
<img src="images/shop_1.svg">
<h3>Дезинсекция</h3>
<p>уничтожение насекомых</p>
<div class="shop-item__price">Цена от: <span>2500 ₽</span></div>
</div>
<div class="shop-item">
<img src="images/shop_3.svg">
<h3>Дератизация</h3>
<p>уничтожение грызунов</p>
<div class="shop-item__price">Цена от: <span>2500 ₽</span></div>
</div>
<div class="shop-item">
<img src="images/shop_2.svg">
<h3>Дезинфекция</h3>
<p>уничтожение бактерий</p>
<div class="shop-item__price">Цена от: <span>3000 ₽</span></div>
</div>
<div class="shop-item">
<img src="images/shop_4.svg">
<h3>Дезодорация</h3>
<p>устранение запахов</p>
<div class="shop-item__price">Цена от: <span>2500 ₽</span></div>
</div>
</div>
<a class="shop-all__button" href="#">ПОЛНЫЙ СПИСОК ЦЕН</a>
</section>
.default-section {
box-sizing: border-box;
padding: 50px 30px;
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.default-section > *:nth-child(2) {
flex-grow: 2;
}
.shop-wrapper {
display: flex;
justify-content: space-around;
align-items: center;
}
.shop-item {
display: flex;
flex-direction: column;
align-items: center;
}
.shop-item img {
width: 150px;
margin-bottom: 15px;
}
.shop-item h3 {
margin-bottom: 10px;
}
.shop-item__price {
font-weight: 500;
}
.shop-item__price span {
font-weight: bold;
}
.shop-all__button {
text-decoration: none;
color: #fff;
font-weight: bold;
background: #2d95bd;
display: block;
}
Простой
