Reply To: B) The header has jumped from 60px to 165px deep.

OK, thanks Eric, that defines the problem but not the solution.

So Google is my friend, and I have just learned that REM is the fallback with Sass or LESS, is relative to the font-size of the parent element on which it is defined and that this means, if one of the parents in the DOM-tree changes its font-size, the font-size of the child element changes too. Also that in contrast the REM unit is relative to the root element of the page (this means the html element), and thus it is possible to define a font-size once on the root and make all other sizes depending on this size.

So then I realized, I have to learn how to convert one into the other in order to deal with this situation, so I found the converter here ~ http://foliovision.com/2013/03/responsive-design-calculator ~ and worked out/confirmed that 40px is actually 2.85714286rem, and then I really started to get confused.

But in the end, I went with the following, and it seems to work quite nicely…

.header-image .site-header .widget-area {
	padding: 10px 0;
	padding: 0.72rem 0;
}

Thanks Eric, my education continues… 8^)