title: Can't fix the issue with <ul> and <li>
body: <p>I am trying to use this chat snippet in the angular project. The point is that I can't include jquery parts so I need just its HTML and CSS parts. Here is the original one:
  <a href="https://bootsnipp.com/snippets/exR5v" rel="nofollow noreferrer">https://bootsnipp.com/snippets/exR5v</a></p>
  
  <p>I copied it on Codepen and there were bullets on the left side of each user in chat list. 
  I also added <code>list-style-type:none;</code></p>
  
  <p>But it just removed bullet points and the extra margin was left there instead of bullets.
  Here is the link of my example: <a href="https://codepen.io/artyombaykov/pen/pxGyjY" rel="nofollow noreferrer">https://codepen.io/artyombaykov/pen/pxGyjY</a>
  I made changes in this part for removing bullet points:</p>
  
  <pre><code>#frame #sidepanel #contacts ul li.contact {
    position: relative;
    padding: 10px 0 15px 0;
    font-size: 0.9em;
    cursor: pointer;
    list-style-type:none;
  }
  </code></pre>
  
  <p>How can I remove that left side extra margin which was appeared because of bullet points?</p>