I have the following code, I want all of my <h5>
to be aligned.
I added align-items-center
to my row
div and it was working before I added the list.
Edit: I already have padding: 0; margin: 0;
to my ul.
.banner-section {
padding: 80px 50px;
}
.spad {
padding-top: 100px;
padding-bottom: 100px;
}
.section-title {
margin-bottom: 40px;
text-align: center;
}
.section-title h5 {
font-size: 22px;
font-weight: 700;
margin-bottom: 38px;
position: relative;
}
.section-title h5:before {
position: absolute;
left: 0;
right: 0;
bottom: -14px;
width: 80px;
height: 3px;
background: #e7ab3c;
content: "";
margin: 0 auto;
}
.section-title h5 a {
color: #252525;
}
.filter-subcategories {
margin-left: 20px;
list-style-type: none;
}
.filter-subcategories li, .filter-subcategories li a {
color: #b2b2b2 !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="banner-section spad">
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-md-3 col-lg-2 mb-3">
<div class="section-title">
<h5><a href="#">Men's Clothing</a> </h5>
</div>
<div class="section-details d-flex justify-content-center">
<ul class="filter-subcategories">
<li class="filter-subcategorys">
<a href="#">Bags</a>
</li>
<li class="filter-subcategorys">
<a href="#">Jackets</a>
</li>
<li class="filter-subcategorys">
<a href="#">Shoes</a>
</li>
</ul>
</div>
</div>
<div class="col-md-3 col-lg-2 mb-3">
<div class="section-title">
<h5><a href="#">Women's Clothing</a> </h5>
</div>
<div class="section-details d-flex justify-content-center">
<ul class="filter-subcategories">
<li class="filter-subcategorys">
<a href="#">Misc</a>
</li>
<li class="filter-subcategorys">
<a href="#">Tops</a>
</li>
</ul>
</div>
</div>
<div class="col-md-3 col-lg-2 mb-3">
<div class="section-title">
<h5><a href="#">Kid's Clothing</a> </h5>
</div>
<div class="section-details d-flex justify-content-center">
<ul class="filter-subcategories">
<li class="filter-subcategorys">
<a href="#">Jackets</a>
</li>
<li class="filter-subcategorys">
<a href="#">Misc</a>
</li>
</ul>
</div>
</div>
<div class="col-md-3 col-lg-2 mb-3">
<div class="section-title">
<h5><a href="#">Accessories & Equipment</a> </h5>
</div>
<div class="section-details d-flex justify-content-center">
<ul class="filter-subcategories">
<li class="filter-subcategory">
-
</li>
</ul>
</div>
</div>
<div class="col-md-3 col-lg-2 mb-3">
<div class="section-title">
<h5><a href="#">Sports Goods</a> </h5>
</div>
<div class="section-details d-flex justify-content-center">
<ul class="filter-subcategories">
<li class="filter-subcategory">
-
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
2
Answers
The problem is of
ul
tag having defaultpadding
value. It’d be better if you includecss-normalizer
for your project orset padding: 0
forul
Refer to the
filter-subcategories
class and use these rules: