title: Background color of parent element showing through
body: <p>I have four html elements, nested in this order: div > ul > li > p. The div has a background color of black. The li element has a background color of white. The ul and p have no background color. Depending on the size of my browser window, a 1 or 2 px - wide strip of the div's background shows through on the ride side of the li element. </p>
  
  <p>Here's a screencast of me increasing the size of my browser window. You can see the black line of the parent's background color flickering on the right side of the top tab. <a href="http://screencast.com/t/wPLq8CJX" rel="nofollow">http://screencast.com/t/wPLq8CJX</a></p>
  
  <p>Does anyone know why this might be happening and how I can prevent it?</p>
  
  <p>Here is the code:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;head&gt;
      &lt;link rel="stylesheet" type="text/css" href="css.css"&gt;
  &lt;/head&gt;
  
  &lt;html&gt;
  &lt;body&gt;
  
  &lt;div id="content-box"&gt;
  
   &lt;!-- columns divs, float left, no margin so there is no space between column, width=1/3 --&gt;
      &lt;div class="col"&gt;
          &lt;div id="add-new-post" class="widget"&gt;
                  &lt;div class="tabs"&gt;
                      &lt;ul&gt;
                          &lt;li id="tab1" class="vh-center"&gt;&lt;p&gt;About Us&lt;/p&gt;&lt;/li&gt;
                          &lt;li id="tab2" class="vh-center"&gt;&lt;p&gt;Our Work&lt;/p&gt;&lt;/li&gt;
                          &lt;li id="tab3" class="vh-center"&gt;&lt;p&gt;Contact&lt;/p&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
                  &lt;div class="tabbed-content-container"&gt;
                      &lt;div id="item1" class="tabbed-content"&gt;
                          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sem turpis, convallis sed lobortis et, efficitur at orci. Vivamus a porttitor felis, finibus ultricies lectus. Fusce non urna egestas, euismod nunc non, ullamcorper leo. Praesent tempor ornare quam, ac pharetra sapien. Sed tempor elementum egestas. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed quis leo sed augue ullamcorper lobortis. Fusce varius convallis auctor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                      &lt;/div&gt;
                      &lt;div id="item2" class="tabbed-content"&gt;
                          Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum id dolor ac nisi fringilla porta. Vestibulum luctus velit libero, nec elementum dolor pellentesque id. Curabitur id risus tristique metus gravida cursus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris convallis orci in condimentum tincidunt. Suspendisse semper ut nibh sit amet condimentum. Donec vehicula venenatis lacinia. Ut nec ullamcorper mauris. Morbi pretium euismod accumsan. Pellentesque laoreet nisi eget eleifend imperdiet. Duis porta libero massa. Integer efficitur, nunc ut placerat vestibulum, ante mauris scelerisque metus, nec dictum lectus mi non arcu.
                      &lt;/div&gt;
                      &lt;div id="item3" class="tabbed-content"&gt;
                          Phasellus augue mi, imperdiet pharetra risus vel, tincidunt rutrum dolor. Vivamus fringilla enim ut fermentum fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur sed risus et magna finibus luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi risus libero, cursus vel vestibulum ac, semper at nibh. Vestibulum nisl lorem, finibus et tortor mattis, rhoncus placerat arcu. Aliquam pellentesque felis non nisl eleifend, vel feugiat nisi lobortis. Sed vestibulum tellus ligula, a pretium elit pellentesque hendrerit. Proin iaculis vel dolor faucibus facilisis. Donec porta efficitur lectus vel sagittis.
                      &lt;/div&gt;
                  &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div id="action-bar" class="widget"&gt;
          &lt;/div&gt;
  
          &lt;div id="subscribe" class="widget"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="col"&gt;
  
          &lt;div id="related-posts" class="widget"&gt;
          &lt;/div&gt;
  
          &lt;div id="tags" class="widget"&gt;
          &lt;/div&gt;
  
          &lt;div id="map" class="widget"&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  
      &lt;div class="col"&gt;
  
          &lt;div id="calendar" class="widget"&gt;
          &lt;/div&gt;
  
          &lt;div id="recent-posts" class="widget"&gt;
          &lt;/div&gt;
  
          &lt;div id="categories" class="widget"&gt;
          &lt;/div&gt;
  
          &lt;div id="pop-com-recent" class="widget"&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script src="js.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>* {margin:0;padding:0;border:0; box-sizing:border-box;}
  html{height:100%;} /*Makes it so that you can specify height as a percentage in elements which have html as an ancestor.*/
  body{text-align:center; padding:2%; background:#B8E6E6; height:100%;}
  #content-box{display:inline-block; width:100%; height:100%;}
  .col{float:left; width:33%; height:600px; min-width: 430px;} /*float all three columns left*/
  .widget{margin:40px 30px; background:white;} /*put some space around all the widgets*/
  
  /* first column: */
  #add-new-post{height:70%;}
  #action-bar{height:10%;}
  #subscribe{height:20%;}
  
  /* second column: */
  #related-posts{height:40%;}
  #tags{height:20%;}
  #map{height:40%;}
  
  /* third column: */
  #calendar{height:30%;}
  #recent-posts{height:10%;}
  #categories{height:10%;}
  #pop-com-recent{height:20%;}
  
  /* Tabs in the add-new-post widget */
  .tabs{float:left; height:100%; width:20%; background:black; color:gray; margin:0;padding:0;border:0;}
  .tabs ul {height:100%; list-style:none; width:100%; margin:0;padding:0;border:0;}
  .tabs ul li {
      margin:0;padding:0;border:0;
      width:100%;
      min-height:60px;
      position:relative;
  }
  
  .vh-center {
      display:table;
      min-height: 60px;
  }
  
  .vh-center p {
      display: table-cell;
      vertical-align: middle;
      text-align: center;
      min-height: 60px;
  }
  
  .tabbed-content-container{
      position: relative;
      text-align: left;
      float:left;
      width:80%;
      height: 100%;
      background: white;
      overflow-y:auto;
  }
  
  .tabbed-content {
      position:absolute;
      margin: 10%;
  
  
  }
  </code></pre>