title: Sidebar Item List Padding Overlapping Eachother?
body: <p>I am just learning how to code in HTML and CSS so don't get mad at me if I code outdated or weirdly to you. Anyways, I'm trying to make a simple test website with a sidebar and I am stuck on it because my item list has padding that causes each item to overlap eachother.</p>
  
  <p>JSFiddle: <a href="https://jsfiddle.net/w82akt0v/" rel="nofollow noreferrer">https://jsfiddle.net/w82akt0v/</a></p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;!--Default Stuff--&gt;
      &lt;meta charset="utf-8"&gt;
  
      &lt;title&gt;Abyss&lt;/title&gt;
  
      &lt;!--Script Links--&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt;
  
      &lt;script src="js/script.js"&gt;&lt;/script&gt;
  
      &lt;!--Stylesheet Links--&gt;
      &lt;link rel="stylesheet" text="text/css" href="css/style.css"&gt;
  
      &lt;link rel="stylesheet" text="text/css" href="css/font-awesome.min.css"&gt;
  
      &lt;!--Font Links--&gt;
      &lt;link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;!--Website Sidebar--&gt;
      &lt;div id="sidebar"&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;Test&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Test&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Test&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Test&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Test&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Test&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>/* Default Stuff */
  body {
  margin:0px;
  padding:0px;
  font-family:"Open Sans", sans-serif;
  }
  
  /* Website Sidebar */
  #sidebar {
  background:rgb(41,41,41);
  width:180px;
  height:100%;
  position:absolute;
  left:0px;
  top:0px;
  }
  
  ul {
  margin:0px;
  padding:0px;
  }
  
  ul li {
  list-style:none;
  }
  
  ul li a {
  background:rgb(41,41,41);
  color:#ccc;
  border-bottom:2px solid #111;
  width:160px;
  padding:10px;
  text-decoration:none;
  }
  
  ul li:before {
  content:'\f1ce';
  font-family:'FontAwesome';
  }
  </code></pre>