title: Remove random padding from my UL LI?
body: <p>I have some sort of space in between my li tags I don't where it's coming from? How can i remove this?</p>
  
  <p>Also, I'd like to change the color of the font to white on hover of the li</p>
  
  <p>JSFIDDLE <a href="http://jsfiddle.net/omarel/tfyxL66c/" rel="nofollow">http://jsfiddle.net/omarel/tfyxL66c/</a></p>
  
  <p>CSS</p>
  
  <pre><code>.nav_container {
   text-align: center;
   width:100%;
  
  }
  .nav_container ul {
  /*  margin-top:15px; */
  margin-left:30px;
  
  }
  .nav_container ul li {
  display: inline-block;
  text-align: center;  
  padding-left:40px;
  padding-right:40px;
  margin:0px;
  height:80px;
  cursor:pointer;
  }
  .nav_container ul li:hover {
  background-color:#08298A;
  }
  
  .nav_container a:hover {
      color:#fff;
  }
  
  header {
  width:100%; 
  margin: auto;
  box-shadow:0 0 8px rgba(0,0,0,0.1);
  min-width:410px;
  }
  .navlogo {
    z-index:99;  
  }
  .navlogo img {
  width:100px;
  margin:10px 10px 10px 10px;
  }
  
  .floatleft {
  float:left;    
  }
  .floatright {
      float:right;    
  }
  .centerdiv {
   margin:0 auto;   
  }
  @media only screen and (min-width:700px) {
  
  header {
  max-width:1250px;  
  }
  
  .container {
      max-width:1250px;   
  }
  
  .box2 {
  
  width:32%;
  height:300px;
  float:left;
  }
  
  .box2left {
  width:65%;
  height:600px;
  float:left;
  }
  
  
  }
  
  div {
  border:solid 1px #E6E6E6;   
  position:relative;
  }
  
  ul li {
      border:solid 1px #E6E6E6;  
  }
  </code></pre>
  
  <p>HTML</p>
  
  <p></p>
  
  <pre><code>        &lt;div class="navlogo floatleft"&gt;
             &lt;a href="/"&gt;&lt;img src="images/logo.png" /&gt;&lt;/a&gt;
          &lt;/div&gt;
  
         &lt;div class="floatleft"&gt;
  
            &lt;div class="nav_container"&gt;
                &lt;ul&gt;
                    &lt;li&gt;&lt;a href=""&gt;Link 1&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href=""&gt;Link 2&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/div&gt;
  
          &lt;/div&gt;
         &lt;div class="floatright"&gt;
  
            &lt;div class="nav_container"&gt;
                &lt;ul&gt;
                    &lt;li&gt;&lt;a href=""&gt;Profile&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href=""&gt;Sign out&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/div&gt;
  
          &lt;/div&gt;
  
  
    &lt;/header&gt;
  &lt;div style="clear:both;"&gt;&lt;/div&gt;
  </code></pre>