Problem:
When zooming in or out on Chrome, the widths of elements increases very slightly and causes some elements to shift to the next line.
Solution:
The actual problem is Chrome adjusts the widths of elements by tenths. So something like 141px will turn into 141.1px which in turn causes all your elements to be just slightly bigger and not fit on one line.
I thought the solution to this was to go through all the problem elements and re-set the size to the original size. However, it turns out you just have to go through the elements in javascript and Chrome will re-set the widths for you. This leads me to believe this width adjustment on zoom is a bug in Chrome. Below is what solved my problem in jQuery:
var menuItems = $("#navigation .menu a");
$(window).resize(function() {
menuItems.each(function(i, v){
//by just going through the menu items it seems to fix the width rounding on zoom.
});
});