Bootstrap Form Spacing - css

Question

Ive been working on this form but I am now having trouble getting things to line up properly. On smaller sizes its not to big an issue, but on large screens the problem is very noticeable.
Two main issues I am finding is that I have some social links that is getting extra spacing from somewhere, though there is no padding or margins between them that I can see. Also the actual form itself is not filling in the whole space. Im not exactly sure how to fix the spacing issues here.
Anyone offer any tips?
Here is a JsFiddle of the code the code saved to SO and Jsfiddle are exact same, though it appears they are giving different results. Not sure why, though clearly I probably messed something up here.
https://jsfiddle.net/Tsukiyono/aq9Laaew/283640/
Here is another link showing things on my gitpages link:
https://tsukiyonocm.github.io/test/
edit A image of the layout I am trying to achieve.
https://imgur.com/a/al8KEMh
body {
background-color: black;
}
/** Contact
---------------------------------------------------------*/
#contactus {
color: black;
max-height: 62.5rem;
width: auto;
}
.contact-title {
font-family: futura-pt-condensed, sans-serif;
font-weight: 700;
padding: 1rem 0;
}
.contact-info {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.custom-contact {
max-height: 15rem;
}
.social {
font-weight: 700;
}
.custom-social {
max-height: 15rem;
width: auto;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.social-contact ul {
list-style: none;
display: flex;
justify-content: center;
padding: 0;
}
.social-contact ul li {
padding: 0 1rem;
}
.btn-sub {
letter-spacing: 1.5;
color: black;
background-color: #fff;
font-weight: 700;
border-radius: 0.15rem;
white-space: normal;
}
.btn-form {
width: 100%;
letter-spacing: 1.5;
color: black;
background-color: #fff;
font-weight: 700;
border-radius: 0.15rem;
}
form {
max-width: 100%;
margin: 0 .5rem;
}
.form-control {
background-color: rgb(46, 46, 46);
border: 1px solid white;
border-radius: 0.2rem;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<section id="contactus">
<div class="container">
<div class="row">
<div class="col-12 text-center">
<h1 class="display-3 contact-title">Contact Us</h1>
</div>
</div>
<div class="row">
<div class="col-12 col-lg-6">
<div class="row contact-info d-flex flex-md-row flex-lg-column">
<div class="col-12 col-md-6 custom-contact">
<h3>- Our Office -</h3>
<address>
SOCKEROO Marketing<br>
123 Address Rd.<br>
Pittsburgh, PA<br>
15222<br>
TEL - 555.555.5555<br>
Email - sockeroomarketing#gmail.com
</address>
</div>
<div class="col-12 col-md-6 custom-social">
<p class="social">- Say Hello -</p>
<div class="social-contact">
<ul class="">
<li><i class="fab fa-inverse fa-twitter-square fa-lg"></i></li>
<li><i class="fab fa-inverse fa-facebook-square fa-lg"></i></li>
<li><i class="fab fa-inverse fa-linkedin fa-lg"></i></li>
<li><i class="fab fa-inverse fa-instagram fa-lg"></i></li>
</ul>
</div>
<button class="btn btn-sub">Subscribe to Our Newsletter</button>
</div>
</div>
</div>
<div class="col-12 col-lg-6 m-0 p-0">
<form action="">
<div class="form-group">
<input type="text" class="form-control" placeholder="Name">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Company or Organization">
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Email Address">
</div>
<div class="form-group">
<input type="tel" class="form-control" placeholder="Phone Number">
</div>
<div class="form-group">
<textarea name="comment" class="form-control" placeholder="Tell us a bit about your project, timeline, and budget"></textarea>
</div>
<button class="btn btn-form">Submit</button>
</form>
</div>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

In regards to the inconsistency between JSFiddle and Github pages, I believe the problem lies in the way bootstrap implements their col-md-6 class. Namely, the flex-basis property.
For reference, this is what I see their class to be, based on the element inspector in chrome:
#media (min-width: 768px)
.col-md-6 {
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
}
(A little context: flex is shorthand for defining flex-grow, flex-shrink, and flex-basis, in that order. You can find that info in this article on CSS-Tricks: here and a little more detail on flex basis just above it, here).
As you can see, they're setting flex basis to 50%. Once I set both the jsfiddle and gitpages' flex property to flex: 0 0 auto, the spacing was consistent on both of those pages, leading me to wonder if flex-basis is calculating 50% to be one value in the JSFiddle and another value in your Github pages. As for a solution, what you can do is create a custom class, let's say .cust-col-md-6, and copy the ruleset defined by bootstrap, but change the flex-basis of the property to auto:
#media (min-width: 768px)
.cust-col-md-6 {
-ms-flex: 0 0 auto;
flex: 0 0 auto;
max-width: 50%;
}
Then from here you can set that as your class instead of using .col-md-6:
<div class="col-12 cust-col-md-6 custom-social">