Weird output from Rails 5 using pragmatic Agile book



I just spent half an hour running through the first section of the Agile
book for Rails 5, having not used Rails since version 2 a great deal has
changed. Anyway, I get to page 83 and they have a “and your screen
should look like this” moment.

Well, strangely my screen did not; it also featured a presentation of
the products array that was loaded up to present the product selection
between the H1 heading Products and the table (that looked precisely
like it should).

When I look at the source behind the browser it seems that the array is
featured just prior to the closure where the table ends…

This doesn’t make any sense to me?? anyone have any bright suggestions?

I attach the html output from Firefox, the rtb files and the scss file.

Thanks in advance of your assistance to understand what rails is doing