title: HTML and CSS. Bug: Appending 1px border when i make my scale more
body: <p>Here is template:</p>
  
  <p><a href="http://jsfiddle.net/4gvy5/embedded/result/" rel="nofollow">http://jsfiddle.net/4gvy5/embedded/result/</a></p>
  
  <p>The code:
  HTML</p>
  
  <pre><code>&lt;div class="wrapper"&gt;
      &lt;ul class="block-list"&gt;
          &lt;li&gt;1&lt;/li&gt;
          &lt;li&gt;2&lt;/li&gt;
          &lt;li&gt;3&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>*{
      margin: 0;
      padding: 0;
      border: none;
  }
  
  .wrapper{
      width: 100%;
      padding: 40px 0;
      background: #e6e6e6;
  }
  
  .block-list{
      list-style: none;
      width: 940px;
      margin: auto;    
      overflow: hidden;
  }
  
  .block-list li{
      display: block;
      float: left;
      width: 298px;
      margin-right: 20px;
      background: #fff;
      border: 1px solid #d9d9d9;
      padding: 20px 0;
      text-align: center;
  }
  
  .block-list li:last-child{
      margin-right: 0;
  }
  </code></pre>
  
  <p>When I resizing window make it scale more - the last child goes down. I look in element panel and understand why it happened. All border(right or left) of li block increased to 1px. That's why width of blocks becomes 301px... But in normal scale, blocks have 300px. How can I solved this problem? Help please. I'll be thanks to everyone.</p>