CSS width wierdness in Chrome and Firefox with Pure CSS <p>To start off with, I'm quite new to CSS still so I hope I haven't done anything horrendously stupid.</p> <p>Basically, I have a design I'm doing built using <a href="http://www.purecss.io" rel="nofollow">Pure</a> and the width is playing up in Google Chrome, while it works as intended in Firefox.</p> <p>Here's a link to what I've done: <a href="http://egf.me/Rushd/rushdtest.html" rel="nofollow">http://egf.me/Rushd/rushdtest.html</a> and screenshots:</p> <ul> <li>Firefox: <a href="http://i.imgur.com/mn3GIbT.png" rel="nofollow">http://i.imgur.com/mn3GIbT.png</a></li> <li>Chrome: <a href="http://i.imgur.com/44jLC6J.png" rel="nofollow">http://i.imgur.com/44jLC6J.png</a></li> </ul> <p>If you have a look at the page source, I haven't really done anything in my own CSS to change anything (I commented it all out as a check just to be sure) so I'm guessing I'm somehow using Pure wrong, since their own site renders fine on Chrome.</p> <p>Also, inspecting the elements with Chrome's dev tools show that the div elements which should be next to each other have widths which add up to less than that of the parent. And nothing there seems to have buffers or padding. Also, if I manually reduce the widths to be very very slightly less, Chrome seems to magically fix everything.</p>