Bootstrap 4 Uneven Buttons - html

Question

I have some buttons in a bootstrap 4 list that I set to btn-block but for some reason the last one is a bit wider than the others. I'm not certain why since the CSS that has been added doesn't change the width or anything. Any clues? In the attached pic it's the Instagram button. Code will be below the image.
<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;
}

Answer 1

Without seeing a working sample it's difficult to properly test. One alternative that I found was to use Bootstrap's Grid instead of .list-inline for arranging the buttons. It provides all of the flexibility of their displaying in a single row versus stacked based on the device width.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css" rel="stylesheet">
<div class="container">
<div class="row">
<div class="col-12 col-sm-4 my-2">
<i class="fa fa-twitter fa-fw"></i><span class="network-name">Twitter</span>
</div>
<div class="col-12 col-sm-4 my-2">
<i class="fa fa-facebook fa-fw"></i><span class="network-name">Facebook</span>
</div>
<div class="col-12 col-sm-4 my-2">
<i class="fa fa-instagram fa-fw"></i><span class="network-name">Instagram</span>
</div>
</div>
</div>