HTML and CSS. Bug: Appending 1px border when i make my scale more

Question

Here is template:

http://jsfiddle.net/4gvy5/embedded/result/

The code: HTML

<div class="wrapper">
    <ul class="block-list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>

CSS

*{
    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;
}

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.

Answer 1

EDIT

Just use box-sizing:border-box; thanks to @Cthulhu

Box-sizing DEMO

---

Original Answer

That is not a bug. But it's always a problem for every web developer. The solution for that is when you add a border. you should also create a negative margin.

DEMO

if your border is

border: 1px solid green;

You must make a negative margin of -1px also to avoid that kind of problem.

margin:0 20px 0 -1px;

or you can simply reduce the width of your li.