Unable to display list items inline and with no bullet Options

[tkburton]

I formatted my social links as unordered list items, and can't figure out how to display them next to eachother without bullets.

Link to site: http://surfguardtv.com/#connect

Here is my HTML:

<div class="content">
<div id="connect">
<ul>
<li>
<a href="https://www.facebook.com/surfguardtv/"><img alt="FB LOGO" height="200px" src="/img/FB%20LOGO.png" width="200px"></a>
</li>
<li>
<a href="https://www.instagram.com/surfguardtv"><img alt="IG LOGO" height="200px" src="/img/IG%20LOGO.png" width="200px"></a>
</li>
<li>
<a href="https://www.youtube.com/channel/UCUeDzkpWcM9ogocPhA_0Erw"><img alt="YOUTUBE LOGO" height="200px" src="/img/YOUTUBE%20LOGO.png" width="200px"></a>
</li>
<li>
<a href="https://www.imdb.com/title/tt12848840/"><img alt="IMDB LOGO" height="200px" src="/img/IMDB%20logo.png" width="200px"></a>
</li>
<li>
<a href="https://open.spotify.com/album/6us2Zh2yoXvYI29IeqfseJ?si=xxZ6lFPUTAWKbcY4gESCaw"><img alt="SPOTIFY LOGO" height="200px" src="/img/SPOTIFY%20LOGO.png" width="200px"></a>
</li>
</ul>
</div>
</div>

And CSS:

#connect {
padding-left: 200px;
background-color: #9ec1bd;
height: 800px;
margin-top: 100px;
}

#connect ul {
list-style: none;
display: inline;
}

I'm going crazy over here... what am i doing wrong?