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

我正在建立我的第一个网站，并将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;
}

联系我：
通过社交媒体与我联系：
网站主页由Curtis Vannor手工编码（正在建设中）。
.insta{
显示：内联块；
保证金：0自动；
文本对齐：居中！重要；
}
.脸{
显示：内联块；
保证金：0自动；
}
.链接{
显示：内联块；
保证金：0自动；
}
.社会{
显示：内联块；
溢出：隐藏；
保证金：0自动；
宽度：100%；
高度：70像素；
文本对齐：居中；
垫底：0px；
形式{
宽度：70%；
保证金：30px自动0px自动；
填充顶部：0px；
垫底：0px；
}
输入[type=“text”]，输入[type=“email”]，文本区域{
显示器：flex；
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
宽度：100%；
边框：1px纯银；
边界半径：4px；
填充：8px；
}

---

尝试在

社交

中使用

显示：内联块

设置

a

标记。它们可能有一些您正在使用的主题样式。在fiddle everything ok@Mihai T中，我刚刚尝试过，但仍然不起作用。我不明白为什么会发生这种情况，因为它在我的te的实时预览中看起来非常好xt编辑器。此外，主题只有一个样式表。它是否可以在其他地方自动设置样式？尝试使用

display:inline block

在

social

中设置

a

标记。它们可能具有您正在使用的主题的一些样式。在小提琴中，一切正常@Mihai T我刚刚尝试过，但仍然不起作用。我做到了我不明白为什么会发生这种情况，因为它在我的文本编辑器的实时预览中看起来非常好。而且，该主题只有一个样式表。它会在其他地方自动设置样式吗？