Can anyone help me figure out why there is a white space appearing on the right side of my page when I create a row? I've tried various solutions without any success. Here is the CSS code I am using:
.special-header {
margin-top: 50px;
}
.special-h1 {
font-size: 40px;
font-weight: 700;
font-style: normal;
color: #6BC8F2;
line-height: 49px;
}
.special-row {
margin-top: 120px;
}
.special-h2 {
text-align: center;
}
.special-block {
border: 2px solid #6BC8F2;
margin-left: 160px;
margin-right: 160px;
border-radius: 5px;
padding: 30px;
}
.special-icon {
float: right;
}
.special-i {
font-size: 39px;
color: #6BC8F2;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<article class="special-header">
<div class="text-center container">
<h1 class="special-h1">Our Specialties</h1>
</div>
<div class="special-row row d-flex justify-content-center">
<div class="col-12 col-md-2 col-lg-2 special-block">
<h2 class="special-h2">Customization</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vitae dui maximus, ullamcorper dolor vel, ultriceserat. Suspendisse sollicitudin odio ac ex rutrum, non vulputate risus posuere <br><a href="#">More…</a></p>
<div class="special-icon">
<i class="fas fa-heartbeat special-i"></i>
</div>
</div>
<div class="col-12 col-md-2 col-lg-2 special-block">
<h2 class="special-h2">Customization</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vitae dui maximus, ullamcorper dolor vel, ultriceserat. Suspendisse sollicitudin odio ac ex rutrum, non vulputate risus posuere <br><a href="#">More…</a></p>
<div class="special-icon">
<i class="fas fa-heartbeat special-i"></i>
</div>
</div>
<div class="col-12 col-md-2 col-lg-2 special-block">
<h2 class="special-h2">Customization</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vitae dui maximus, ullamcorper dolor vel, ultriceserat. Suspendisse sollicitudin odio ac ex rutrum, non vulputate risus posuere <br><a href="#">More…</a></p>
<div class="special-icon">
<i class="fas fa-heartbeat special-i"></i>
</div>
</div>
</div>
</article>
https://i.sstatic.net/aMtGl.png Here is the HTML and CSS code I'm using along with an image of how it currently appears on the website!