Why does Chrome add a pixel to my Div <p>i have created a which is 1010px long with a 5px border around it making it's length 1020, however, when i inspect the div in chrome, despite the fact the code still says it's with is 1010px and it's border is 5px it's actually 1021px</p> <p>i can confirm that neither the left or right borders are adding a pixel as the div is supposed to house 5 separate images which each are 202px wide so all 5 should fit perfectly with no gaps but the first image as the slightest of gaps between it and the left border</p> <p>i have had this work perfectly before but with tables, i'm currently redesigning the site to remove all the tables and replace them with divs while maintaining the exact same look</p> <p>this is the code that creates the div</p> <pre><code>&lt;div width="1010" align="center" style="border: 5px solid #9DBFFF; margin:0px; padding:0px;"&gt; </code></pre> <p>NOTE: yes i will move the style to a .css file after i got it working here first, another part of the redesign, removing all styles and putting them in .css files</p>