Social Media Alignment

[hnahli]

I have a added couple of social media button in a HTML footer widget but they seen not aligned

this is the HTML code I placed in the widget:

<center>
<br></br>
<div class="nav-container2">
<ul>
<li>
<div class="fb-like" data-href="https://www.fcom/" data-layout="button_count" data-action="like" data-show-faces="false" data-share="true"></div>
</li>
<li>
<a href="https:/" class="twitter-follow-button" data-show-count="false">Follow @ahlamtafsir</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</li>
<li>
<div class="g-ytsubscribe" data-channelid="UCLvfTgTD5e2y5tpqMpVnziA" data-layout="default" data-theme="dark" data-count="default" data-onytevent="onYtEvent"></div>
</li>
</ul>
</div>

<div id="fb-root"></div>

</center>

And This is the CSS I have added for it:

.nav-container2 ul div {display: inline;}
.nav-container2 li {display: inline-block; float: none;}