Пишу карточки товаров, взял шаблон с bootstrap, но там имеются границы/линии/разметка у списка. я хочу это убрать, но получилось у меня убрать только внутреннюю разметку, list-style: none и border: none почему-то не работают.
Код прилигаю:
<div id="project" class="portfolio">
<div class="container">
<div class="title text-center">
<h2>Актуальные объекты недвижмости</h2>
</div>
<div class="row">
<div class="col-md-6">
<div class="card">
<img src="img/portfolio1.png" class="card-img-top" alt="apart">
<div class="card-body">
<h5 class="card-title">2 ком.квартира ЖК Idel Tower</h5>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item"><img class="product-image" src="img/area.png" alt="area"> Площадь: 45м2</li>
<li class="list-group-item"><img class="product-image" src="img/location.png" alt="location"> Проспект Октября 107Б</li>
<li class="list-group-item"><img class="product-image" src="img/build.png" alt="build"> Этаж 24/25</li>
<li class="nav-item"> <button class="button">Узнать подробнее</button></li>
</ul>
</div>
</div>
<div class="col-md-6">
<div class="card">
<img src="img/portfolio1.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">2 ком.квартира ЖК Idel Tower</h5>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item"><img class="product-image" src="img/area.png" alt="area"> Площадь: 45м2</li>
<li class="list-group-item"><img class="product-image" src="img/location.png" alt="location"> Проспект Октября 107Б</li>
<li class="list-group-item"><img class="product-image" src="img/build.png" alt="build"> Этаж 24/25</li>
<li class="nav-item"> <button class="button">Узнать подробнее</button></li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="card">
<img src="img/portfolio1.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">2 ком.квартира ЖК Idel Tower</h5>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item"><img class="product-image" src="img/area.png" alt="area"> Площадь: 45м2</li>
<li class="list-group-item"><img class="product-image" src="img/location.png" alt="location"> Проспект Октября 107Б</li>
<li class="list-group-item"><img class="product-image" src="img/build.png" alt="build"> Этаж 24/25</li>
<li class="nav-item"> <button class="button">Узнать подробнее</button></li>
</ul>
</div>
</div>
<div class="col-md-6">
<div class="card">
<img src="img/portfolio1.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">2 ком.квартира ЖК Idel Tower</h5>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item"><img class="product-image" src="img/area.png" alt="area"> Площадь: 45м2</li>
<li class="list-group-item"><img class="product-image" src="img/location.png" alt="location"> Проспект Октября 107Б</li>
<li class="list-group-item"><img class="product-image" src="img/build.png" alt="build"> Этаж 24/25</li>
<li class="nav-item"> <button class="button">Узнать подробнее</button></li>
</ul>
</div>
</div>
</div>
</div>
</div>
/* ------------------------------
portfolio
---------------------------------*/
.portfolio {
background: #ffffff;
padding: 0px 0 140px;
}
.portfolio .text {
border-radius: 5px;
margin-left: 153px;
margin-right: 40px;
padding: 20px;
text-align: left;
top: -70px;
position: relative;
background: #fff;
margin-bottom: -40px;
box-shadow: 0 5px 38px -6px rgba(0, 0, 0, 0.14);
}
.portfolio .text h5 {
color: #ff5252;
}
.list-group {
list-style: none; /* Убираем стандартные маркеры списка */
padding: 0; /* Убираем отступы */
margin: 0; /* Убираем отступы */
}
.list-group-flush{
list-style: none;
list-style-type: none;
border: none;
}
/* Убираем рамки у элементов списка */
.list-group-item {
border: none; /* Убираем рамки */
padding: 10px; /* Устанавливаем отступы */
display: flex; /* Сделаем элементы списка flex-контейнерами */
align-items: center; /* Вертикальное выравнивание содержимого */
}
.card{
margin: 25px 0 0 0;
}