I am facing an issue with the button width in a bootstrap 4 list. All buttons are set to btn-block, but the last one appears wider than the others. I can't seem to figure out why this is happening as the CSS modifications made do not affect the width. Can someone provide any insight? The Instagram button seems to be the culprit based on the attached image below. Code snippet will follow.
https://i.sstatic.net/uX4Dy.jpg
<header class="construction-header">
<div class="container">
<div class="construction-message">
<h1><img src="http://jessetoxik.com/img/header/logo/logo_temp.png"></h1>
<h3 class="fjalla">Webpage Coming Soon</h3>
<h3 class="release fjalla"></h3>
<hr class="construction-divider">
<ul class="list-inline construction-social-buttons fjalla">
<li class="list-inline-item">
<a href="https://example.com" class="btn btn-secondary btn-lg btn-drk btn-block">
<i class="fa fa-twitter fa-fw"></i>
<span class="network-name">Twitter</span>
</a>
</li>
<li class="list-inline-item">
<a href="https://www.example.com/" class="btn btn-secondary btn-lg btn-drk btn-block">
<i class="fa fa-facebook fa-fw"></i>
<span class="network-name">Facebook</span>
</a>
</li>
<li class="list-inline-item">
<a href="https://www.example.com" class="btn btn-secondary btn-lg btn-drk btn-block">
<i class="fa fa-instagram fa-fw"></i>
<span class="network-name">Instagram</span>
</a>
</li>
</ul>
</div>
</div>
</header>
body, html {
width: 100%;
height: 100%;
}
body, h1, h2, h3, h4, h5, h6 {
font-weight: 700;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000!important;
}
.construction-header {
padding-top: 50px;
padding-bottom: 50px;
text-align: center;
height: 100%;
color: #f8f8f8;
background: url('imagesrc') no-repeat center center;
background-size: cover;
}
.construction-message {
position: relative;
padding-top: 20%;
padding-bottom: 20%;
}
.construction-message>h1 {
margin: 0;
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
font-size: 5em;
}
.construction-divider {
width: 400px;
border-top: 1px solid #f8f8f8;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.construction-message>h3 {
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
}
.construction-social-buttons i {
font-size: 80%;
}
@media(max-width:767px) {
.construction-message {
padding-bottom: 15%;
}
.construction-message>h1 {
font-size: 3em;
}
ul.construction-social-buttons>li {
display: block;
margin-bottom: 20px;
padding: 0;
}
ul.construction-social-buttons>li:last-child {
margin-bottom: 0;
}
.construction-divider {
width: 100%;
}
}
.btn-drk {
background-color: #232323!important;
}