表单按钮和社交媒体图标卡在垂直方向

Question

我正在构建我的第一个网站，并将CSS / HTML / JS代码传输到wordpress。出于某种原因，我的社交媒体图标和表单按钮的方向（在下面的代码和屏幕截图中显示）将不会水平定向。有人可以帮我这个吗？

 <div id="form-wrap">
    <h4 id="contactme">Contact Me:</h4>
    <h5>Connect with me on social media:</h5>
    <div class="social">
    <a href="#"><img class="face" src="http://localhost/wp-content/uploads/2017/05/Facebook.png" /></a>
    <a href="#"><img class="insta" src="http://localhost/wp-content/uploads/2017/05/Instagram.png" /></a>
    <a href="#"><img class="link" src="http://localhost/wp-content/uploads/2017/05/Linkedin.png" /></a></div>
<form>
<fieldset><input name="name" type="text" placeholder="Name" />
<input name="email" type="text" placeholder="Email" />
<input name="phone" type="text" placeholder="Phone" />
<textarea name="message" placeholder="Message"></textarea></fieldset>
<fieldset class="buttons"><input class="btn" type="submit" value="Submit"/>
<input class="btn" type="reset" value="Reset Form" /></fieldset>
</form>
<h6>Site home page hand-coded by Curtis Vannor(under construction).</h6>
</div>



 .insta{
        display: inline-block;
        margin: 0 auto;
        text-align: center !important;
    }
.face{
        display: inline-block;
        margin: 0 auto;
    }

.link{
        display: inline-block;
        margin: 0 auto;
    }
.social{
        display: inline-block;
        overflow: hidden;
        margin: 0 auto;
        width: 100%;
        height: 70px;
        text-align: center;
        padding-bottom: 0px;
form{
    width:70%;
    margin: 30px auto 0px auto;
    padding-top: 0px;
    padding-bottom: 0px;
}

input[type="text"], input[type="email"], textarea{
    display: flex;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    border: 1px solid silver;
    border-radius: 4px;
    padding: 8px;
}

Picture of problems