JSFiddle - React, Tailwind, and code Playground

HTML

<div id="social">
  <ul>
    <li><img src="img/footertwitter.png" alt="placeholder+image"></li>
    <li><img src="img/footerfacebook.png" alt="placeholder+image"></li>
    <li><img src="img/footeremail.png" alt="placeholder+image"></li>
  </ul>
</div>

CSS

#social {
margin: 0 auto;
text-align: center;
width: 90%;
max-width: 1140px;
position: relative;
  }

    #social ul {
/*margin: 0 0 3em 0!important;*/
padding: 0!important;
    margin:auto;
    display: block;
    

}

  #social ul li {
list-style-type: none;
display: inline-block;
margin-left: 1.5em;
margin-right: 1.5em;
  }