Почему результат сложения некоторых чисел может быть равен Not-a-Number (NaN)?

Результатом сложения некоторых чисел может быть NaN, если одно или оба числа в процессе вычисления являются специальными значениями, которые не могут быть представлены в виде числа. Например, деление нуля на ноль возвращает NaN, также как и некоторые математические операции, такие как квадратный корень из отрицательного числа.

При сравнении item.offsetWidth с самим собой результат не равен NaN, потому что это сравнение двух одинаковых чисел, которые в данном контексте представляют конкретное значение ширины элемента. Самопроверка значений на равенство сами себе обычно возвращает true, так как оба значения идентичны и не содержат NaN.

Вы берёте childNodes, куда входят не только элементы, но и текстовые узлы между элементами (переводы строк). 
 
// [object NodeList] (7)
[#text,<div/>,#text,<div/>,#text,<div/>,#text]
 Так вот у этих текстовых узлов нет параметра offsetWidth, соответственно вы складываете undefined, получая NaN. 
 
- let box = document.querySelector(".box").childNodes;
+ let box = document.querySelector(".box").children;
- box.forEach((item) => {
+ for (let item of box) {
- })
+ }