title: Padding to list item?
body: <p>Trying to make a small navigation here. jsfiddle below.</p>
  
  <p><a href="http://jsfiddle.net/s3king93/yjKdR/" rel="nofollow">http://jsfiddle.net/s3king93/yjKdR/</a></p>
  
  <p>Is there any way to add padding to the link items without having the text get larger or move? </p>
  
  <p>I'd like it to ideal look like this <a href="http://i.imgur.com/0zDt0vR.png" rel="nofollow">http://i.imgur.com/0zDt0vR.png</a></p>
  
  <p>Any ideas?</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="list-1"&gt;
      &lt;ul class="list-style-1"&gt;
          &lt;li&gt;&lt;a href=""&gt;HOME&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;INFLUENCES&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;ABOUT ME&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;CLASSES&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;ANDREWS VIDEO BLOG&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;PHOTOGRAPHY&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.list-1 {
      padding:none;
      float: right;
      clear:right;
      padding-right: 27px;
  }
  
  .list-style-1 {
      padding-top: 26px;
      list-style-type: none;
      font-family: "Bell Gothic Std Light";
      font-size: 20px;
  }
  
  a:link {
      text-decoration:none;
      color: #2A2A2A;
  }
  
  a:visited {
      text-decoration:none;
      color: #2A2A2A;
  }
  
  a:hover {
      text-decoration:none;
      color: #69E0F6;
      background-color: #2A2A2A;
      padding-left: 5px;
      padding-right: 70px;
  }
  
  a:active {
      text-decoration:none;
      color: #69E0F6;
      background-color: #2A2A2A
  }
  </code></pre>